《Webpack5 核心原理与应用实践》番外篇->webpack配置合并

田八
405 阅读5分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

这里是番外篇，下一篇是讲Vue项目怎么搭建，包括服务端渲染，但是这刚了解完js、css就直接上手vue，还有服务端渲染，这已经是项目上的配置了，有点节奏太快，所以这里就弄个番外，当做过渡。
番外主要学习（也是自己温习，其实之前的都会）webpack开发环境和生产环境的配置，重用配置。

webpack配置合并

在我们日常开发的过程中，总是会围绕着两个环境，一个是开发环境，一个是生产环境。
开发环境：是指“猿”天天修改bug的环境，开发环境是不存在bug的。
生产环境：是指天天给“猿”提bug的环境，只有生产环境才有bug。
上面说的都是玩笑话，反正大家都懂。

开发环境是不同于生产环境的，往往是为了提高开发效率，所以会引用很多额外的工具和配置来帮助“猿”们更加快速高效的进行开发。
生产环境更注重的是更快速和流畅的的访问，提高用户体验度，滞留住用户，所以也会使用额外的工具和配置来帮助“猿”们生成体积更小，访问更快的程序包。
所以就会有生产环境配置和开发环境配置这两个配置，但是他们大多数配置都是相似的，为了方便维护，所以他们相似的配置就需要合并，不同的配置就需要区分开。

webpack配置合并

  • 生产环境和开发环境搭建
    • 安装依赖：npm i -D webpack-merge

    这里我们需要用到webpakc-merge来合并webpack的配置

    • 根目录下新建一个config的目录
    • 新建一个base.config.js的文件
    • 将之前写的webpack.config.js的内容全部复制过去，然后移除mode、rules.css、rules.less的那一段就好，如下
    const path = require('path');
const EslintPlugin = require('eslint-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-typescript']
                    }
                }
            },
            {
                test: /.ts$/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    plugins: [
        new EslintPlugin({
            extensions: ['.ts', '.js']
        })
    ]
}
    • 然后新建一个开发环境的配置文件webpack.dev.config.js，内容如下
    const {merge} = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const baseConfig = require('./base.config')

module.exports = merge(baseConfig, {
    mode: 'development',
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader',
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader',
                    'less-loader',
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html'
        })
    ]
})
    • 然后再新建一个生产环境的配置文件webpack.prod.config.js，内容如下
    const {merge} = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const baseConfig = require('./base.config')

module.exports = merge(baseConfig, {
   mode: 'production',
   module: {
       rules: [
           {
               test: /.css$/,
               use: [
                   MiniCssExtractPlugin.loader,
                   {
                       loader: "css-loader",
                       options: {
                           importLoaders: 1
                       }
                   },
                   'postcss-loader',
               ]
           },
           {
               test: /.less$/,
               use: [
                   MiniCssExtractPlugin.loader,
                   {
                       loader: "css-loader",
                       options: {
                           importLoaders: 1
                       }
                   },
                   'postcss-loader',
                   'less-loader',
               ]
           }
       ]
   },
   plugins: [
       new MiniCssExtractPlugin(),
       new HtmlWebpackPlugin({
           filename:'index.html', // 生成的文件名，其实默认就是index.html
           template:'./public/index.html' // 引用的模板文件地址
       })
   ]
})

    这里解释一下，开发环境使用style-loader，将css生成在.js文件中，不用单独生成一个.css文件，这样能加快构建速度和开发时的访问速度，因为使用MiniCssExtractPlugin会单独生成一个.css文件，每次修改就会多一次请求。
    生产环境则相反，使用MiniCssExtractPlugin单独生成.css文件可以让浏览器有缓存能力，加快二次访问速度。
    然后接下来的开发环境还需要配合使用html-webpack-plugin，所以不能放到base.config.js中，因为插件是叠加的，会有冲突。

    • 根目录下面新建一个public目录，然后下面新建一个index.html文件，内容随意，不做要求。
    • 完了之后在package.json文件中的scripts属性下面增加配置，如下
    {
    "scripts": {
      "dev": "npx webpack --config ./config/webpack.dev.config.js",
      "build": "npx webpack --config ./config/webpack.prod.config.js",
      "test": "echo "Error: no test specified" && exit 1"
    }
}

    使用--config [配置文件]可以加载指定配置文件。
    在package.json文件的scripts属性下面配置命令可以使用npm run [xxx]的方式运行。

    • 然后就是大家熟悉的命令了：
    • 开发环境：npm run dev（生成的文件没有.css文件）
    • 生产环境：npm run build（生成的文件有.css文件）

正式的开发环境

上面介绍的开发环境还是敲命令，生成文件，不能每次修改都敲一次命令然后在查看页面吧，接下来的环节就是webpack-dev-server

  • 配置正式的生产环境
    • 安装依赖：npm i -D webpack-dev-server
    • 然后修改webpack.config.js的配置
    module.exports = merge(baseConfig, {
    mode: 'development',
    module: {
        rules: []
    },
    // 关键代码
    devServer: {
        hot: true, // 是否热更新
        open: true // 是否自动打开浏览器
    },
    plugins: []
})
    • 接下来修改一下package.json文件的dev命令
    "scripts": {
  "dev": "npx webpack serve --config ./config/webpack.dev.config.js"
},

    就是多加了一个serve的命令，很简单的。

    • 命令行运行：npm run dev

    这个时候如果一切ok就会自动打开浏览器，然后你可以选择修改一些页面样式试试热更新的功能。

总结

生产环境是不同于开发环境的，因为两者的需求差异，所以需要两套不同的配置来实现不同的需求。
生产环境追求快速的体验，所以会减小包的体积，会区分加载的资源，需要用到不同的技术来实现，这里只是简单的使用MiniCssExtractPlugin插件。
开发环境追求快速实时的更新，所以需要热更新，就简单的使用了一个webpack-dev-server。

avatar
文章
阅读
粉丝