Webpack 生产环境基本配置 - 03

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. 配置 DevServer

每次改完代码都需要打包更新是很麻烦的，我们配置一个自动热更新代码，方便我们在开发中调试。

DevServer 配置也非常的简单，在webpack.config.js中，加入devServer配置。这里需要注意的是，如果是webpack5需要把contentBase换成static，并且需要加上watchFiles: './src/index.html'，不然浏览器不会自动去刷新页面。

const { resolve } = require('path')

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 输出位置
    output: {
        filename: 'built.js',
        // __dirname nodejs的变量，代表当前文件目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // plugins配置
    plugins: [],
    // 模式 development 开发环境，production 生产环境
    mode: 'development'，
    devServer: { 
        // 项目构建后路径 
        contentBase: resolve(__dirname, 'build'), 
        // 启动 gzip 压缩 
        compress: true, 
        // 端口号 
        port: 3000, 
        // 自动打开浏览器 
        open: true 
   }
}

2. 提取css成单独文件

第一步：下载插件

npm install --save-dev mini-css-extract-plugin

第二步：修改webpack.config.js配置文件

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// process.env.NODE_ENV = 'development'

module.exports = {
  // 入口文件
  entry: './src/js/index.js',
  // 输出位置
  output: {
    filename: 'js/built.js',
    // __dirname nodejs的变量，代表当前文件目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader配置
  module: {
    rules: [
      {
        // 匹配哪些文件
        test: /.css$/,
        // use 从右到左执行
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  // plugins配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  // 模式 development 开发环境，production 生产环境
  mode: 'development'
}

第三步：运行 npm run dev 查看效果，可以看见css被单独提取出来了。

3. css兼容性处理

css会因为浏览器版本会出现很多兼容性的问题，以前没有使用打包工具时都需要开发考虑这些兼容性问题，大大的影响了我们的开发效率，现在使用postcss可以来解决这些问题，我们开发人员不需要在考虑更多的浏览器兼容性问题。

第一步：下载loader

npm install --save-dev postcss-loader postcss-preset-env

第二步：修改webpack.config.js配置文件

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// process.env.NODE_ENV = 'development'

module.exports = {
  // 入口文件
  entry: './src/js/index.js',
  // 输出位置
  output: {
    filename: 'js/built.js',
    // __dirname nodejs的变量，代表当前文件目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader配置
  module: {
    rules: [
      {
        // 匹配哪些文件
        test: /.css$/,
        // use 从右到左执行
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'，
          { 
              loader: 'postcss-loader', 
              options: { 
                  ident: 'postcss',
                  plugins: () => [
                      require('postcss-preset-env')
                  ] 
             } 
          }
        ]
      }
    ]
  },
  // plugins配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  // 模式 development 开发环境，production 生产环境
  mode: 'development'
}

第三步：修改package.json文件

"browserslist": {
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

4. 压缩css

第一步：下载插件

npm install --save-dev css-minimizer-webpack-plugin

第二步：修改webpack.config.js配置文件

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

// process.env.NODE_ENV = 'development'

module.exports = {
  // 入口文件
  entry: './src/js/index.js',
  // 输出位置
  output: {
    filename: 'js/built.js',
    // __dirname nodejs的变量，代表当前文件目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader配置
  module: {
    rules: [
      {
        // 匹配哪些文件
        test: /.css$/,
        // use 从右到左执行
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  // plugins配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new CssMinimizerPlugin()
  ],
  // 模式 development 开发环境，production 生产环境
  mode: 'development'
}

没使用插件

使用插件后