WebPack打包流程「详细！！！」
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
这段话有三个重点：
打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任
1、webpack的基本配置
1.1、entry（项目入口，打包的入口文件，一个字符串或者一个对象）：entry:"./src/index.js"
1.2、output（出口文件，配置打包的结果，一个对象）：
output:{
filename: "build.js"
}
1.3、module（模块的处理）：loader的配置主要在module.rules中进行，例如：
module: {
rules:[{
test: /(\.jsx|\.js)/, //表示匹配规则，是一个正则表达式
use:{ //表示针对匹配文件将使用处理的loader
loader: "babel-loader",
options: {
presets: ["es2015", "react"]
}
}
}]
}
1.4、plugin（loader不能做的处理都能交给plugin来做），例如：
const CleanWebpackPlugin = require("clean-webpack-plugin")
{
plugin:[
new webpack.DefinePlugin({
"process.env" : {
NODE_ENV: JSON.stringify("production")
}
}),
new CleanWebpackPlugin(["js"], {
root: __dirname + "/stu/",
verbose: true,
dry: false
})
]
}
1.5、其它常用属性：
devtool:打包后的代码和原始代码存在较大的差异，此选项控制是否生成以及如何生成sourcemap
devserver：通过配置devserver选项，可以开启一个本地服务器（通常在这里配置跨域）
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com/',
pathRewrite: {'^/api' : ''},
changeOrigin: true, // target是域名的话，需要这个参数，
secure: false, // 设置支持https协议的代理
}
}
}
watch：启用watch模式后，webpack将持续监听热河已经解析文件的更改，开发是开启会很方便
watchoption：用来定制watch模式的选项
performance：打包后命令行如何展示性能提示，如果超过某个大小是警告还是报错
1.6、webpack打包优化常用配置：
1.6.1、减小打包体积：
使用CommonsChunkPlugin分离第三方包
entry: {
vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // 第三方文件
app: './src/main.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor", // 当加载 vendor 中的资源的时候，把这些资源都合并到 vendor.js 文件中
filename: "js/vendor.js",
minChunks: Infinity,
})
],
或者使用externals进行cdn网络托管：
// index.html页面中引入
// webpack中配置
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'react-router': 'ReactRouter',
'redux': 'Redux',
'history': 'History'
},
// vue.config.js
configureWebpack:{
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter'
},
}
1.6.2、小图片优化，使用url-loader，将小图转成base64，防止小图太多请求次数太多
npm install -D url-loader
module: {
rules: [{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'url-loader', // 优化小图片过多造成请求数太多
options: {
limit: 8192, // 如果图片小于 8192 bytes 就直接 base64 内置到模板，否则才拷贝
outputPath: 'img/'
}
}]
},
1.6.3、压缩css、js和html：
// 压缩css
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
//这个地方配置一个对象，添加一个属性进行压缩css文件
use: {
loader: 'css-loader',
options: {
minimize: true // 配置minimize 值为true，压缩css 文件
}
}
})
},
// 压缩js
/*下载*/ npm install -D uglifyjs-webpack-plugin
/*引入*/ const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
/*配置*/
plugins: [
new UglifyJsPlugin(), // 压缩 JavaScript
],
//压缩html
/*下载*/ npm install -D html-webpack-plugin
/*引入*/ const HtmlWebpackPlugin = require('html-webpack-plugin')
/*配置*/
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 把 index.html 也打包到 dist 目录中
// 压缩 html，默认 false 不压缩
minify: {
collapseWhitespace: true, // 去除回车换行符以及多余空格
removeComments: true, // 删除注释
}
}),
],