前言
书接上文,当前 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 文件了
结语
行文至此study-webpack已经实现打包后获得需要的打包产物。初步完成了可以开发可打包的 webpack+React 极简版工程。
作者水品有限,阐述或者讲解有误欢迎评论区留言指教,感谢之至
下一篇: 从零搭一个极简版webpack+React工程(五)