新建一个项目my-webpack-senior
初始化项目:
npm init -y
使用yarn装jquery:
yarn add jquery --save
继续安装包依赖:
yarn add webpack-cli --save--dev
yarn add webpack --save-dev
yarn add webpack-dev-server html-webpack-plugin --save-dev
其他操作按照https://blog.csdn.net/zerobaek/article/details/87117481进行
package.json文件里面的dev属性不需要加content-base是因为html-webpack-plugins插件已经将index.html加入到内存里面去了会被托管在项目的根目录(根目录是默认的托管目录)文件下面,默认会打开根目录,而根目录下面又有index.html文件就会被直接打开,所以不需要添加contentbase
配置loader:
yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --save-dev
配置babel:
yarn add babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 --save-dev
配置发布阶段的脚本和配置文件:
将发布阶段的配置文件命名为webpack.pub.config.js
在package.json文件的scripts属性中加上项目发布后运行的指令属性
运行npm run pub会去读取webpack.pub.config.js这个配置文件
"pub": "webpack --config webpack.pub.config.js"
会报错:
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any def
解决办法:
"pub": "webpack --config webpack.pub.config.js --mode development"
配置图片打包后存放到images中:
修改一下图片的处理规则和匹配规则,将图片放到images目录下
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=669185&name=images/[hash:8]-[name].[ext]' }
每次发布前删除dist目录:
安装插件:
yarn add clean-webpack-plugin --save-dev
在配置文件中,导入每次删除文件的插件
const cleanWebpackPlugin = require('clean-webpack-plugin')
在plugins节点里面new一个cleanWebpackPlugin(["删除文件1","删除文件2",...])对象
new cleanWebpackPlugin(['dist'])
报错:
clean-webpack-plugin only accepts an options object.
修改:
new cleanWebpackPlugin()
分离第三方包:
分离第三方包有利于减少bundle.js的体积
发布思路: bundle.js 中只存放 自己的代码, 第三方包的代码,全部抽离到 另外的JS中
修改配置文件:
const webpack = require('webpack')
修改入口节点:
entry: { // 配置入口节点
app: path.join(__dirname, './src/main.js'),
vendors1: ['jquery'] // 把要抽离的第三方包的名称,放到这个数组中
}
将bundle.js文件放到js文件目录下,js文件用来存放所有打包好的js文件:
output: {
path: path.join(__dirname, './dist'),
filename: 'js/bundle.js'
}
修改插件节点:
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors1', // 指定要抽离的入口名称
filename: 'js/vendors.js' // 将来再发布的时候,除了会有一个 bundle.js ,还会多一个 vendors.js 的文件,里面存放了所有的第三方包
})
vendors.js文件里面存放了所有的第三方包
会报错,因为4.x版本后不支持 CommonsChunkPlugin:
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
解决办法:
optimization与plugins同级
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "vendors1",
chunks: "initial",
minChunks: 2
}
}
}
}
压缩JS代码:
new webpack.optimize.UglifyJsPlugin({
compress: { // 配置压缩选项
warnings: false // 移除警告
}
}),
new webpack.optimize.DedupePlugin({ // 设置为产品上线环境,进一步压缩JS代码
'process.env.NODE_ENV': '"production"'
})
会报错,因为4.x版本后不支持 UglifyJsPlugin :
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
解决办法:
安装
yarn add uglifyjs-webpack-plugin --save-dev
在配置文件中导入插件:
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
minimizer与splitChunks同级
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
})
],
继续报错:
webpack.optimize.DedupePlugin is not a constructor
解决办法:
移除即可
继续报错:
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
解决办法:
yarn add extract-text-webpack-plugin@next --save-dev
压缩HTML页面:
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html',
minify: {
collapseWhitespace: true, // 合并多余的空格
removeComments: true, // 移除注释
removeAttributeQuotes: true // 移除 属性上的双引号
}
})
minify的其他优化项
抽取样式表文件并处理CSS路径:
因为bundle.js里面还会包含css文件,这也会影响bundle.js文件的体积
yarn add extract-text-webpack-plugin --save-dev
导入抽取CSS的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin")
在插件节点中加入,把抽取出的css文件放到css目录下面
new ExtractTextPlugin("css/styles.css")
将抽取出的css文件放到css目录下面,这样做也会影响放在images下面的图片,因为会影响路径,解决办法:
修改第三方文件匹配规则
{
test: /\.css$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader",
publicPath: '../' // 指定抽取的时候,自动为我们的路径加上 ../ 前缀
})
},
{
test: /\.scss$/, use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: '../' // 指定抽取的时候,自动为我们的路径加上 ../ 前缀
})
}
压缩CSS文件:
yarn add optimize-css-assets-webpack-plugin --save-dev
导入压缩CSS的插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
在插件节点中加入
new OptimizeCssAssetsPlugin()
访问dist下面的index.html,最终会得到这个页面
其余补充可以看看这个文档https://blog.csdn.net/harsima/article/details/80819747