npm

每次我们打包或者启动服务的时候，都需要在命令行输入一长串命令，这对我们开发体验也是极其不友好的，那么我们怎么去优化一下呢？

配置启动命令

我们在package.json中配置如下命令：

  1. "scripts": {
  2.   "dev": "webpack serve -c ./config/webpack.config.dev.js", // 开发环境
  3.   "build": "webpack -c ./config/webpack.config.prod.js" // 生产环境
  4. },

运行

然后我们在控制台输入 npm run dev 来启动服务,发现服务器可以正常启动
image.png

优化

有时候我们会发现在生产环境下进行打包会出现很多警告，告诉我们有些包超过预期，如果我们不希望出现这个警告可以做如下配置：

  1. performance: {
  2.     hints: false
  3. }

提取公共配置

我们虽然已经将 开发环境 和 生产环境 配置拆分开来了，但是我们发现两份配置中有很多重复代码，我们来提取一下公共的配置,并改造一下开发环境和生产环境。

公共配置(webpack.config.common.js)

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入 html-webpack-plugin 插件
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入 mini-css-extract-plugin 插件
  5. module.exports = {
  6.     entry: {
  7.         index: './src/index.js', // 配置 index.js 打包入口
  8.         another: './src/another.js', // 配置 another.js 打包入口
  9.     }, // 入口文件路径
  10.     output: { // 出口文件
  11.         path: path.resolve(__dirname, '../dist'), // 出口文件路径
  12.         clean: true, // 生成新文件的同时是否删除旧文件
  13.     },
  14.     plugins: [
  15.         new HtmlWebpackPlugin({ // 实例化 HtmlWebpackPlugin,它将帮我们生成一个 dist/index.html 文件
  16.             template: './index.html', // 指定模板
  17.             filename: 'app.html', // 生成的文件名
  18.             inject: 'body' // script标签的生成位置
  19.         }),
  20.         new MiniCssExtractPlugin({
  21.             filename: 'styles/[contenthash].css'
  22.         })
  23.     ],
  24.     module: {
  25.         rules: [ // 配置资源模块
  26.             {
  27.                 test: /\.css$/, // 利用正则匹配以 .css 结尾的文件
  28.                 use: [MiniCssExtractPlugin.loader, 'css-loader'] // 使用的 loader
  29.             },
  30.             {
  31.                 test: /\.js$/, // 匹配 js 文件
  32.                 exclude: /node_modules/, // 去除编译 node_modules 包
  33.                 use: {
  34.                     loader: 'babel-loader', // 使用 loader
  35.                     options: {
  36.                         presets: ['@babel/preset-env'], // 添加预设
  37.                         plugins: [
  38.                             [
  39.                                 '@babel/plugin-transform-runtime'
  40.                             ]
  41.                         ]
  42.                     }
  43.                 }
  44.             }
  45.         ]
  46.     },
  47.     optimization: {
  48.         splitChunks: {
  49.             cacheGroups: {
  50.                 vendor: {
  51.                     test: /[\\/]node_modules[\\/]/,
  52.                     name: 'vendors',
  53.                     chunks: 'all'
  54.                 },
  55.             },
  56.         }
  57.     }
  58. }

开发环境(webpack.config.dev.js)

  1. module.exports = {
  2.     output: { // 出口文件
  3.         filename: './script/[name].js', // 出口文件名
  4.     },
  5.     mode: 'development', // 设置模式 'none' | 'development' | 'production'
  6.     devtool: 'inline-source-map',
  7.     devServer: {
  8.         static: './dist' // 路径
  9.     },
  10. }

生产环境(webpack.config.prod.js)

  1. const CssMinizerPlugin = require('css-minimizer-webpack-plugin'); // 引入 css-minimizer-webpack-plugin 插件
  2. const TerserPlugin = require('terser-webpack-plugin') // 引入 terser-webpack-plugin 插件
  4. module.exports = {
  5.     output: { // 出口文件
  6.         filename: './script/[name].[contenthash].js', // 出口文件名
  7.         publicPath: 'http://localhost:8080/'
  8.     },
  9.     mode: 'production', // 设置模式 'none' | 'development' | 'production'
  10.     optimization: {
  11.         minimizer: [
  12.             new CssMinizerPlugin(),
  13.             new TerserPlugin()
  14.         ],
  15.     },
  16.     performance: {
  17.         hints: false
  18.     }
  19. }

合并配置文件(webpack-merge)

我们将配置文件拆分为三分，需要让他们之间产生联系，这个工作我们可以借助 webpack-merge 来完成

安装
  1. npm install webpack-merge -D

配置

我们在 config文件 下新建一个 webpack.config.js 文件，配置如下：

  1. const { merge } = require('webpack-merge')
  3. const commonConfig = require('./webpack.config.common')
  4. const prodConfig = require('./webpack.config.prod')
  5. const devConfig = require('./webpack.config.dev')
  7. module.exports = (env) => {
  8.     if (env.production) {
  9.         return merge(commonConfig, prodConfig)
  10.     } else if (env.development) {
  11.         return merge(commonConfig, devConfig)
  12.     }
  13.     return new Error('No matching configuration was found')
  14. }

然后我们改造一下我们的 package.json 如下：

  1. "scripts": {
  2.   "dev": "webpack serve -c ./config/webpack.config.js --env development",
  3.   "build": "webpack -c ./config/webpack.config.js --env production"
  4. },

运行

分别执行 npm run dev 和 npm run build，效果和我们预期的一样，说明我们合并配置文件生效了