从零搭一个极简版webpack+React工程(四)

3,176 阅读3分钟

前言

从零搭一个极简版 webpack+React 工程(三)

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

初次打包

执行

npm run build

image.png

看一下终端提示:

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

image.png

如何解决这两个提示?

修改 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

image.png

终端控制台清爽了许多

打包产物

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

image.png

这是因为使用 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 之前的文件是不是已经删除了

image.png

但是这里依然有个问题,作者使用 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 已经单独打包到一个文件中

image.png

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

image.png

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 文件了

image.png

结语

行文至此study-webpack已经实现打包后获得需要的打包产物。初步完成了可以开发可打包的 webpack+React 极简版工程。

作者水品有限,阐述或者讲解有误欢迎评论区留言指教,感谢之至

下一篇: 从零搭一个极简版webpack+React工程(五)

参考文献