Webpack 5 comes out every few days, and using the new version of WebPack will make your code package faster and smaller. Here is an introduction to the use of Webpack5:

1. Install

Initialization package. Json

npm init -y
Copy the code

Install webpack

npm i -D webpack-dev-server webpack webpack-cli
Copy the code

Then create the public folder, create an index.html file in it, create a SRC folder where our business code is stored, create index.js, and finally create config.js in xianjian config folder

2. Pack the configuration

Check out the official documentation: Webpack

Configure inlet and outlet

{ entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname,'.. ','dist') },}Copy the code

Automatically generate HTML files

 new HtmlWebpackPlugin({      template: './public/index.html' })
Copy the code

3. Configure the NPM script

"start": "webpack serve --config config/config.js",
Copy the code

NPM start starts the project. Amazingly, I don’t have to do anything. This is because WebPack does the default configuration

That’s the basic configuration, and all that’s left is rich configuration

4. Enrich configurations

4.1 to join the Babel

If the options configuration is large, you can create a folder. Babelrc in the root directory

{        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env']          }        } }
Copy the code

After this configuration, it is possible to convert ES6+ to ES5, but it is not possible to hot update

4.2 hot update

Enable hot update, as shown below

devServer: {    contentBase: path.join(__dirname,'..', 'dist'),    port: 9000，
    hot:true}
Copy the code

Add the.browserslist file to the root directory

last 1 version
> 1%
not IE 11
Copy the code

In this case, hot updates will still not work, which requires configuration

{
target: 'web'
}
Copy the code

There are also a lot of CSS, SCSS or image parsing need to configure a different loader

4.3 Configuring Environment Variables

We use vuE-CLI to configure. Env.test and so on to configure variables in different environments. What if we don’t use vue-CLI?

.env.development
.env.production
.env.test
Copy the code

Create these files to configure variable values for different environments, and use the following functions to read the values

const fs = require('fs'); const path = require('path'); module.exports = (file) => { let fileName = path.join(__dirname, file); let data = fs.readFileSync(fileName, { encoding: 'utf8' }); let d = data.replace(/\r/g, ',').replace(/\n/g, ''); / / the line feed and carriage return to replace the let arr = d.s plit (', '). The map ((item) = > {return the item. The split (' = '); }); let obj = {}; arr.forEach((item) => { obj[item[0].trim()] = item[1].trim(); }); return obj; };Copy the code

Then in base.js, we inject these variables globally, as shown below:

const FsEnv = require('./env.js'); const envObj = FsEnv(`.. /env/.env.${process.env.NODE_ENV}`); Plugins: [new webpack.defineplugin ({// define environment and variable 'process.env': {...envObj}}),]}Copy the code

4.4 Adding Packet Analysis

Install the following plug-ins

npm i -D webpack-bundle-analyzer
Copy the code

Do the following:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
{
 plugins: [    new BundleAnalyzerPlugin()  ]}
Copy the code

4.5 Adding time analysis

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap({ mode: 'production', devtool:'cheap-module-source-map'});Copy the code