前言
书接上文,当前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极简版工程。
作者水品有限,阐述或者讲解有误欢迎评论区留言指教,感谢之至