阅读 541

一步步使用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'});
复制代码
文章分类
前端
文章标签