一步步使用Webpack5

webpack5几天一版，使用新版的webpack会使你的代码打包更快，更小。下面就介绍一下，webpack5的使用：

1.安装

初始化package.json

npm init -y

安装webpack

npm i -D webpack-dev-server webpack webpack-cli

然后新建public文件夹，在里面新建一个index.html文件，然后新建src文件夹，这个是存放我们的业务代码的，然后新建index.js,最后在仙剑config文件夹，里面新建上config.js

2.打包配置

查看官方文档：webpack

配置入口和出口

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

自动生成html文件

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

3.配置npm script

"start": "webpack serve --config config/config.js",

执行npm start就可以启动项目了，很神奇是吧，我啥也没做就好了，这是因为webpack做了默认配置

这样基本配置就可以了，剩下的就是丰富配置了

4.丰富配置

4.1 加入babel

如果options配置比较多，可以在根目录新建一个文件夹.babelrc ，可以进行配置

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

这样配置之后可以将ES6+转ES5了，但是却无法热更新，下面就加上

4.2 热更新

如下所示，开启热更新

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

添加.browserslist文件在根目录

last 1 version
> 1%
not IE 11

这样热更新依然无效，这个时候就需要配置

{
target: 'web'
}

还有很多解析css ，scss 或是图片就需要配置不同的loader了

4.3 配置环境变量

我们使用vue-cli配置.env.test等配置不同环境的变量，不使用vue-cli怎么办呢？

.env.development
.env.production
.env.test

新建这几个文件分别配置不同环境的变量值，使用下面的函数，来读取其中的值

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, ''); // 把换行和回车替换
    let arr = d.split(',').map((item) => {
        return item.split('=');
    });
    let obj = {};
    arr.forEach((item) => {
        obj[item[0].trim()] = item[1].trim();
    });
    return obj;
};

然后再base.js中,讲这些变量注入到全局，如下所示：

const FsEnv = require('./env.js');
const envObj = FsEnv(`../env/.env.${process.env.NODE_ENV}`);

{
     plugins: [
        new webpack.DefinePlugin({
            // 定义环境和变量
            'process.env': {
                ...envObj
            }
        }),
     ]
}

4.4 添加包分析

安装如下插件

npm i -D webpack-bundle-analyzer

做如下配置：

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

4.5 添加时间分析

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