从零搭一个极简版webpack+React工程（四）-一一网

前言

书接上文，当前study-webpack已经可以使用react、typescript、css、less、scss、图片和字体。已经勉强可以用来开发前端页面了。开发完成需要打包，本章主要讲述webpack打包生产代码产物的过程

初次打包

执行

npm run build
复制代码

看一下终端提示：

hash应该使用 chunkhash 或者contenthash
各种 modules 的引用信息

如何解决这两个提示？

修改 webpack.common.js

修改 output 中 filename 命名方式
添加 stats 配置 modules 为fasle

module.exports = {
  entry: {
   // other
  },
  output: {
    filename: "[name].[chunkhash:4].js",
   // other
  },
  plugins: [],

  stats: {
    modules: false,
  },
}
复制代码

再次执行 npm run build

终端控制台清爽了许多

打包产物

再看打包产物，作者只引入了一个index.js文件，问什么生成了这么多打包后的js?

这是因为使用hash命名文件，每次打包都会将打包产物存放到dist文件，只存放，不删除所以dist文件夹中的数据越来越多。

如何在打包前删除之前的打包产物呢？

clean-webpack-plugin

安装

npm i clean-webpack-plugin -D
复制代码

修改webpack.prod.js

const { merge } = require("webpack-merge")
const common = require("./webpack.common.js")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = merge(common, {
  mode: "production",
  plugins: [new CleanWebpackPlugin()],
})

复制代码

再次执行 npm run build

看一下效果dist之前的文件是不是已经删除了

但是这里依然有个问题，作者使用css、less怎么打包之后只有js了呢？

这是因为webpack只认识js，所以打包后不论css、js、jsx都只会生成js文件，如果希望生成css单独文件，需要 mini-css-extract-plugin;一个webpack插件

打包生成单独css文件

安装 mini-css-extract-plugin

npm i mini-css-extract-plugin -D
复制代码

修改 webpack.common.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
 plugins: [
    // other
    new MiniCssExtractPlugin(),
  ],
   module: {
    rules: [
      {
        test: /\.(css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
          },
        ],
      },
      {
        test: /\.(less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: "postcss-loader",
          },

          "less-loader",
        ],
      },
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: "postcss-loader",
          },
          "sass-loader",
        ],
      },
    
    ],
  },
}
复制代码

再次执行 npm run build

查看dist文件夹，发现css已经单独打包到一个文件中

这里又有一个问题，打包后的css代码并没有被压缩。这需要处理一下

css代码压缩

安装css-minimizer-webpack-plugin

npm i css-minimizer-webpack-plugin -D
复制代码

修改webpack.prod.js

// 新增
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin")
module.exports = merge(common, {
  mode: "production",
  plugins: [new CssMinimizerWebpackPlugin()],
})
复制代码

再次执行 npm run build

查看dist文件夹，css已经被压缩了

怎么还有个index.4cb4.js.LICENSE.txt文件？这个需要另一个插件删除了

压缩js

安装terser-webpack-plugin

npm i terser-webpack-plugin -D    
复制代码

修改 webpack.common.js

const TerserPlugin = require("terser-webpack-plugin")
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false, // 不在生成license
      }),
    ],
  },
}
复制代码

再次执行 npm run build

查看dist文件夹，已经没有 license 文件了