Install webpack4
Rely on
NPM install –save is required for online development.
NPM i-d is short for NPM install –save-dev. It is a package that installs the module and saves it in devDependencies of package.json, mainly in the development environment.
Install webpack
To ensure that each developer has the same version of WebPack during development, it is best to install it under the current project. (Do not install NPM I webpack-g globally)
Webpack is generally used in development, but is not needed when it goes online. In Webpack 4, in addition to normal installation of Webpack, you need to install a separate Webpack-cli (NPM I webpack webpack-cli -d).
1, CD XXX go to the current project, NPM init -y initialization, generate package.json (recommended node version installed later than 8.2)
2, NPM I webpack webpack-cli -d install webpack
Webpack4 can be configured in 0
Webpack4 can be configured in 0, but it is not usually used because it is not smart enough.
SRC should have the default entry file index.js. You can find the index.js file under SRC for default packaging, which will support commonJS specification, ES6 module specification, CMD, AMD by default. After packaging, the code can run directly in the browser
1, create SRC folder, SRC folder create index.js, index.js input content
NPX webpack automatically generates main.js
Node v8.5 comes with an NPX file, and NPX + files can be found in the bin file under node_modules. If the file doesn’t exist, it will install it for you
NPX webpack // If mode is not set, packaged files will be compressed automatically (default is production mode).
NPX webpack –mode development // Set mode to development mode, packaged files will not be compressed
3, index. Js reference a.js (default support node writing automatic conversion; Default support for various modularity)
NPX webpack –mode development package. After the package is successfully packaged, go to the index.html browser and open it and display hello.
The name of main.js index. Js is specified by default. It can not be changed, otherwise it will generate an error.
Webpack is the CommonJS specification based on the syntax used for Node
Now let’s go to our regular operation
Create a webpack.config.js(default, modifiable) file under your project to configure webpack
These are the normal configuration modules for WebPack
Given the structure of the project, let’s write the configuration from zero
Pre-package file directory
Write configuration (the simplest WebPack configuration)
NPX webpack packaging
File directory after packaging
Configuration execution file
At work, we usually don’t execute commands like NPX webpack when we package and compile. Instead, we execute commands like NPM run dev. Since the commands are executed through NPM, we should find the execution script in package.json to configure the commands.
NPM run Dev is the packaged file in our development environment. Of course, since devServer put the file in memory for us, it does not output the packaged dist folder
After passing the NPM run build, a dist directory folder is generated, just as it was packaged above
Multientry file
Multiple entries are not related but should be packaged together. The entry file can be written as an array, which enables multiple files to be packaged into one file
A.js index.js does not matter
Entry Entry file array configuration
NPM Run Bulid pack
Package successfully generated bundle.js
Change the HTML js link to bundle.js to open the browser
Usage of plug-ins
Instead of creating an HTML file in the dist directory and referring to the packaged JS, we should have used a template implementation to package the HTML that references the good path.
This requires the installation of a common plugin, htML-webpack-plugin
Dist built index.html is removed and packaged using the index.html template in the SRC file
NPM install html-webpack-plugin -d install the plugin
All installed plug-ins need to be referenced in webpack.config.js and configured in plugins.
This will automatically direct the bundled bundle.js to index.html, which will then be packaged to the dist directory
NPM Run Build package
Generate the packaged index.html under dist
Display in browser
The project on-line needs to compress the code, increase the configuration
NPM Run Build package
The index.html is packaged
Resolving cache issues
NPM Run Build package
The clean-webpack-plugin needs to be cleaned out as unnecessary files are generated every time we pack
NPM install clean-webpack-plugin -d Install the plugin
Referenced in webpack.config.js and configured in plugins.
NPM Run Build package
Delete redundant files after packaging
Paths that reference static resources after packaging can be added to the domain name
NPM Run Bulid pack
Bugs encountered: Word writing errors report errors. Invalid configuration object. Webpack already uses configuration to initialize objects that do not match the API pattern. – Configuration. module should be an object. – > Options that affect normal modules (NormalModuleFactory).
