webpack学习
一、webpack从入门到真实项目配置
1、按照教程操作时，遇到了一些报错情况，基本都是版本问题导致的。
2、package.json的"scripts"中可以配置一些常用的操作。
3、Babel 可以让你使用 ES2015/16/17 写代码而不用顾忌浏览器的问题，Babel 可以帮你转换代码。配置 Babel 推荐使用 .babelrc 文件管理。
- babel-loader 用于让 webpack 知道如何运行 babel；
- babel-core可以看做编译器，这个库知道如何解析代码；
- babel-preset-env 这个库可以根据环境的不同转换代码；
4、webpack-config.js
1）module->rules：test做匹配、use配置使用的loader和一些参数、exclude是不包括的路径
2）module.exports = {
entry: {
// bundle 和 vendor 都是自己随便取名的，会映射到 [name] 中
bundle: 自己的代码,
vendor: 依赖库的代码
}, // 入口文件
output: {
path: path.resolve(__dirname, ‘build’), // 必须使用绝对地址，输出文件夹
filename: ‘[name].[chunkhash].js’, // 打包后输出文件的文件名，使用哈希来保证缓存
publicPath: ‘build/’ // 知道如何寻找资源（例如处理后的大图片）
}
}
5、处理图片：url-loader 和 file-loader
6、处理CSS：css-loader（可以让 CSS 文件也支持 impost，并且会解析 CSS 文件） 和 style-loader（可以将解析出来的 CSS 通过标签的形式插入到 HTML 中，依赖前者。），可以在options中配置是否开启CSS 模块化，这时候CSS整合到JS中，会造成 JS 文件的大小变大，操作 DOM 也会造成性能上的问题。
7、extract-text-webpack-plugin 插件将 CSS 文件打包为一个单独文件。new ExtractTextPlugin(“css/[name].[hash].css”)配置输出文件的路径。
8、将依赖的库和自己的代码分割开来：配置多文件入口
9、抽取共同代码：使用插件CommonsChunkPlugin
new webpack.optimize.CommonsChunkPlugin({
// vendor 的意义和之前相同
// manifest文件是将每次打包都会更改的东西单独提取出来，保证没有更改的代码无需重新打包，这样可以加快打包速度
names: [‘vendor’, ‘manifest’],
// 配合 manifest 文件使用
minChunks: Infinity
})
10、clean-webpack-plugin插件：删除不需要的文件，这里教程还没更新，CleanWebpackPlugin使用方式变了
new CleanWebpackPlugin({
verbose: true,
dry: false,
cleanAfterEveryBuildPatterns: [‘dist/*.js’]
})
11、html-webpack-plugin插件：自动在 HTML 中新增标签
new HtmlWebpackPlugin({
template: ‘index.html’//模板文件
})
12、按需加载代码：通过路由的异步加载来完成
13、自动刷新：webpack-dev-server插件，“webpack-dev-server --open”
14、optimize-css-assets-webpack-plugin插件：压缩提取出的 CSS，并解决ExtractTextPlugin分离出的 JS 重复问题。
15、webpack.optimize.UglifyJsPlugin：压缩 JS 代码
