webpack打包大概流程
2024-09-08 00:42:09
webpack
步骤
1. 新建一个webpack.config.prod.js
2. 压缩bundle.js和index.html
//设置为生产环境
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
//压缩js
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false //压缩警告
},
comments: false //去掉版权信息等注释
})
//压缩index.html
new HtmlWebpackPlugin({
template: './template.html',
filename: 'index.html',
minify:{
collapseWhitespace:true,//压缩空格
removeComments:true,//去除注释
minifyJS:true,//压缩js
minifyCSS:true//压缩css
}
})
3. 干掉热重载
4. 设置output
output: {
path:path.resolve(__dirname,"dist"),
filename:'bundle.js'
}
5. 设置package.json
"build": "webpack --progress --config webpack.config.prod.js"
6. 抽离图片
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4000,//大于4kb就抽离出去
name:"images/[name]-[hash:5].[ext]"
}
}
]
}
7. 打包之前干掉dist目录
//打包之前，删除dist目录
var CleanWebpackPlugin = require('clean-webpack-plugin')
//打包之前，删除dist目录，写在其它插件前面 plugins里面
new CleanWebpackPlugin('dist'),
8. 第三方包抽离
entry
entry: {
quanjiatong:['react','react-dom','react-router-dom'],
fetchJsonp:['fetch-jsonp'],
bundle:'./src/main.js'
}
output
output: {
path:path.resolve(__dirname,"dist"),
filename:'js/[name].js' //抽离第三方包2
}
plugins
// 抽离第三方包3
new webpack.optimize.CommonsChunkPlugin({
name: ['quanjiatong','fetchJsonp'],
// filename: "vendor.js"
// (给 chunk 一个不同的名字)
minChunks: Infinity,
// (随着 entry chunk 越来越多，
// 这个配置保证没其它的模块会打包进 vendor chunk)
})
9. 抽离bundle中的样式文件
//抽离第三方样式的包
const ExtractTextPlugin = require("extract-text-webpack-plugin");
{
test: /\.css$/,
// use: ['style-loader', 'css-loader']
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader',
options: {
minimize: true //压缩css
}
}
]
})
}
new ExtractTextPlugin("css/styles.css")最新文章
- [转]MongoDB学习 C#驱动操作MongoDB
- setuptools,pip,install,UnicodeDecodeError: 'ascii' codec can't decode byte.原因和解决方案
- Centos 6.4 8250/16550 只生成了4个串口
- 【VNC】Ubuntu14.04LTS下安装VNC View
- linux的一点小随笔
- oracle 常用语句
- 杭电 1795 The least one
- QT程序库
- COJ 0343 WZJ的公司（二）
- Yougth的最大化（好题，二分查找 0 1分数规划）
- MonkeyRunner源代码分析Android通信设备
- Mac 必备软件 Quicksilver
- Spark:控制日志输出级别
- 各种输出速度比较(小白应该来看看,dalao绕道)
- bzoj4665 小w的喜糖（dp+容斥）
- C_求最大连续子序列和
- pip安装第三方库镜像源选择
- （转）EOS中账户、钱包和密钥的关系
- Zabbix-2.4-安装-3
- [UE4]在蓝图中设置图片