Webpack - Webpack 初阶 - 《技术成长》

简介
准备
1. HTML 配置
2. CSS 配置
3. 图片、文字配置
4. JavaScript 配置
5. 常用其他配置
依赖

简介

Webpack 就不介绍了，前端工程化大部分人用它，本文主要从应用的角度介绍 Webpack 在日常开发中，最常用的配置是什么，让大家无压力看懂大部分项目的配置。

准备

先初始化 package.json，默认回车即可，安装好 webpack 和 webpack-cli

npm init -y
npm install webpack webpack-cli -D

在当前目录下创建 webpack.config.js 文件，这是 webpack 指定的默认配置文件，可以自己配置

// package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // webpack.config.js 为配置文件路径
    "build": "webpack --config webpack.config.js",
  }
}

通过终端即可运行打包

npm run build

1. HTML 配置

HTML 需要配置的不多，一般使用插件 html-webpack-plugin 是自动创建 HTML 模板，多页面打包

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html 插件
export default {
    plugins: [
      new HtmlWebpackPlugin({
      template: path.join(__dirname, `${filepath}/index.html`), // 模板位置
      filename: `${filename}.html`, // 名字
      chunks: ['vendors', 'common'], // 引入的 chunks
      inject: true,
      minify: {
        html5: true, // 页面是否压缩
        collapseWhitespace: true, // 是否去空格
        preserveLineBreacks: false, // 是否去换行
        minifyCSS: true, // 是否压缩内嵌 css
        minifyJS: true, // 是否压缩内嵌 js
        removeComments: false, // 是否去注释
      },
    })
  ]
}

2. CSS 配置

Webpack 只能解析 JavaScript 和 JSON，为了能让 Webpack 识别 CSS，只能通过配置 Loader 来完成；但要压缩和将 CSS 单独打包出来，需要使用 optimize-css-assets-webpack-plugin 和 mini-css-extract-plugin 插件分别压缩和外联

// css 外联插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 
 // css 压缩插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
export default {
    module:{
      rules: [ // loader 规则配置
      {
        test: /\.css$/, // 匹配 CSS 文件
        use: [
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.less$/, // 匹配 Less 文件, 从右往左解析
        use: [ // 
          MiniCssExtractPlugin.loader, // 外联 css 文件, 即 <link />
          // 'style-loader', // 内嵌样式 即 <style/>
          'css-loader',
          'less-loader',
          'postcss-loader',  // css 优化插件, 自动补全浏览器前缀
        ],
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:16].css', // 哈希命名 contenthash, 内容改变才重新打包
    }),
    new OptimizeCssAssetsWebpackPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'), // 借助 cssnano 压缩 css
    })
   ]
}

postcss 包需要在根目录创建 postcss.config.js 配置文件，引入自动前缀包

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

3. 图片、文字配置

和 CSS 类似，图片和文字也需要专门的插件来处理

export default {
  module:{
      rules: [ // loader 规则配置
      // 图片可以用 file-loader 或者 url-loader 压缩
      { // 解析图片-1
        test: /\.(png|svg|jpg|gif)$/, // 匹配图片
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240 // 小于 10k 则转为 base64 编码
          }
        }]
      },
      { // 解析图片-2
        test: /\.(png|svg|jpg|gif)$/, // 匹配图片
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name][hash:8].[ext]', // 哈希命名, 指定 8 位
          },
        }],
      },
      { // 解析文字
        test: /\.(woff|woff2|eot|ttf|otf)$/, // 匹配文字
        use: ['file-loader'],
      },
    ]
  }
}

4. JavaScript 配置

Webpack 不支持处理 ES6 和 TypeScript 等语法，所以需要 babel 和 loader 转化，需要插件完成代码压缩混淆、代码分割、动态导入代码块等功能

const webpack = require('webpack');
module.exports = {
    module: {
      rules: [
        {
        test: /\.js$/, // 匹配 Js 文件
        use: [
          'babel-loader', // 转化 es6
          // 'ts-loader',
        ]
      },
    ]
  },
  plugins: [
      new webpack.optimize.UglifyJsPlugin(), // production 模式自动开启
  ],
    optimization: {
    splitChunks: { // 切割代码块， 需要在 htmlWebpackPlugin 的 chunks 里面引入
      minSize: 0, // 包被分割打包的最小 size
      cacheGroups: {
        commons: {
          name: 'commons', // 代码块名称
          chunks: 'all', // 
          minChunks: 2, // 包引用次数，达到即打包
        },
      },
    },
  },  
}

babel 配置一般在更目录创建 .babelrc 配置文件

{
  "presets": [
    [
      "@babel/preset-env" // es6 转化 es5
    ]
  ],
  "plugins": [
      "@babel/plugin-syntax-dynamic-import", // import 异步动态导入代码块插件
  ]
}

5. 常用其他配置

主要介绍一些常用开发配置和生产环境的配置，外加一些常用插件

// 友好日志插件
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
// 清理 dist 文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  /* 模式有 3 种, 会自动启用不同的插件
   * development 开发
   *  - NamedChunksPlugin
   *  - NamedModulesPlugin
   * production 生产
   *  - FlagDependencyUsagePlugin
   *    - FlagIncludedChunksPlugin
   *  - ModuleConcatenationPlugin // 去模块化插件
   *  - NoEmitOnErrorsPlugin
   *  - OccurrenceOrderPlugin
   *  - SideEffectsFlagPlugin
   *  - UglifyJsPlugin // JavaScript 压缩丑化插件
   * none 无
   */
  mode: 'development',
  plugins: [
    new CleanWebpackPlugin(),
      new FriendlyErrorsWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 热替换
  ],
    devServer: { // 开发服务器, 开发模式
    contentBase: './dist', // 资源地址 
    hot: true, // 开启热更新
    stats: 'errors-only' // 
  },
  /* 开发记录错误代码位置，用于开发模式
   * eval 打包后代码
   * source-map 打包前代码, 
   * cheap-source-map 记录行
   * inline-source-map 内嵌入 js 文件内
   */
  devtool: 'source-map',
  stats: 'errors-only', // 日志状态, 配合日志插件
}

依赖

以上配置所需依赖的 npm 包

"@babel/core": "^7.4.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.0.0",
"cssnano": "^4.1.10",
"file-loader": "^4.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-externals-plugin": "^3.8.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.7.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"url-loader": "^2.0.1",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"

参考资料