How to establish a demo configuration webpack environment
This article mainly explains "how to establish a demo configuration webpack environment". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to establish a demo configuration webpack environment".
1. Set up a demo
2. Go to the established webpack_demo directory and create a dist folder (for production) and a src folder (for the development environment)
Src folder: used to store the javascript code we wrote, which can be simply understood as a module written in JavaScript.
Dist folder: used to store files for browsers to read. This is the file packaged by webpack.
3. Write program files:
Manually create an index.html file under the dist file
/ dist/index.html
Webpack
Explanation: the bundle.js file is introduced here, and webpack can be used to generate an entry file to create an entry.js under src.
/ src/entry.js:
Document.getElementById ('title') [xss_clean] = HelloWebpack
Then there is webpack packaging:
1. Enter "webpacksrc/entry.jsdist/bundle.js" in the terminal in vscode: after successful execution, the bundle.js file will be generated in the dist directory and the HelloWebpack information will be displayed in the browser.
2. It is also possible to package webpacksrc/entry.jsoutputdist/bundle.jsmodedevelopment in this way.
The bundle.js file is generated in the dist directory
Global installation of live-server:
Npminstall-glive-server
After installation, executing live-server on the terminal will display the HelloWebpack information in the browser.
Thank you for reading, the above is the content of "how to establish a demo configuration webpack environment". After the study of this article, I believe you have a deeper understanding of how to establish a demo configuration webpack environment, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
