webpack打包大概流程

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")