Webpack 配置详解
一、打包升级
1.基础打包配置
1. 开发模式(devtool)
This option controls if and how source maps are generated.
开发建议使用eval模式，缺点是无法正确显示行号，想要正确显示行号，可以时候用source-map或者eval-source-map
生产环境： 建议使用cheap-module-source-map
2. 入口配置(entry)
string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })入口打包根场景不同，入口配置也不同。
- 单入口：
entry: './A/index.js'
entry: [
'./A/index.js',
],- 多入口：
entry: [
'./A/index.js',
'./B/index.js'
],
entry: {
A: './A/index.js',
B: './B/index.js'
}3. 输出配置(output)
-
输出路径配置：
output: { // path.resolve用来拼接文件多级目录 // __dirname 为当前文件所在全路径地址 path: path.resolve(__dirname,'dist'), // 输出文件名字 // filename: 'app.js', // 以key作为文件名输出 filename: '[name].js', // chunkhash 根据文件内容生成特点的hash，使用这个可以保证文件内容不变，那么文件名字就不会改变，可以用来作为热更新 chunkFilename: '[chunkhash].js' }
4. resolve
Configure how modules are resolved. For example, when calling import "lodash" in ES2015, the resolve options can change where webpack goes to look for "lodash" (see modules).
resolve: {
// 当你reuire时，不需要加上以下扩展名
extensions: ['.js', '.md', '.txt'],
},5. 插件(plugin)
plugins: [
// Webpack 2以后内置
// new webpack.optimize.OccurrenceOrderPlugin(),
// 碰到错误warning但是不停止编译
new webpack.NoEmitOnErrorsPlugin(),
// 开发模式不需要压缩
// new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
],6. moudles
- babel-loader(用来做js代码转化)
- style-loader & css-loader(用来转化css代码)
- less-loader 转化less文件
- raw-loader 把文件当做普通的文本文件读取
- json-loader webpack 2以后就不需要配置了（内置了）
- file-loader
用来处理文件，可以用url-loader代替，但是如果你资源文件是即时文件，那么就使用fileload 指定一类对象作为文件，并且返回一个public 的url，这样可以利用浏览器的线程来加载文件，减小bundle.js的大小。 - url-loader
用来处理eot|woff|woff2|ttf|svg|png|jpg这些文件，可以防止加载资源文件导致页面加载缓慢url-loader 使用limit来指定一个size，当文件的大小小于这个size的时候，对象将会转化为Dataurl，直接嵌入在js中.
2.多入口打多个包 （生成多个bundle.js）
这个是webpack 3.1.0新出来的配置方式,可以用来解决多个入口文件，打包成多个文件夹的问题。
module.exports = [{
output: {
filename: './dist-amd.js',
libraryTarget: 'amd'
},
entry: './app.js',
}, {
output: {
filename: './dist-commonjs.js',
libraryTarget: 'commonjs'
},
entry: './app.js',
}]3.兼容多浏览器，添加postcss-loader（生产环境使用，增加build和rebuild时间）
添加postcss-loader，需要做如下配置
webpack config 配置
插件配置
{
test: /\.less/,
use: [
'style-loader',
'css-loader',
+ 'postcss-loader',
'less-loader'
]
},
{
test: /\.css$/,
- use: 'style-loader!css-loader',
+ use: 'style-loader!css-loader!postcss-loader',
},.postcss.config.js文件配置
module.exports = {
plugins: {
'postcss-import': {}, // 能够使用import语法 @import "cssrecipes-defaults";
'postcss-cssnext': {}, //PostCSS-cssnext是一个PostCSS插件，可以帮助您使用最新的CSS语法。 它将CSS规范转换为更兼容的CSS，因此您不需要等待浏览器支持。
'cssnano': {}
}
}4.css文件抽离 (生成环境使用，会增加build和rebuild时间)
webpack config 配置
插件配置
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+new ExtractTextPlugin('style.css'), //名字配置
{
test: /\.less/,
_ use: [
_ 'style-loader',
_ 'css-loader',
_ 'less-loader'
_ ]
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader', 'less-loader']
+ })
},
{
test: /\.css$/,
- use: 'style-loader!css-loader',
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader']
+ })
},.postcss.config.js文件配置
module.exports = {
plugins: {
'postcss-import': {}, // 能够使用import语法 @import "cssrecipes-defaults";
'postcss-cssnext': {}, //PostCSS-cssnext是一个PostCSS插件，可以帮助您使用最新的CSS语法。 它将CSS规范转换为更兼容的CSS，因此您不需要等待浏览器支持。
'cssnano': {}
}
}5.公共文件抽取 （抽取公共文件，可以减少build与rebuild时间）
公共文件抽取一般依靠 CommonChunkPlguin 和 Dllplugin这两个插件.
-
共同点：
- 都可以抽出公共模块
-
不同点：
-
CommonChunkPlguin
- CommonChunkPlguin可以抽出多个模块间公共模块
- 配置了HtmlWebpackPlugin后，不需要手动在html中导入
-
dllPlugin
- dllPlugin 可以在multi compliler（多个webpack config 文件） 中使用
- dllPlugin 生成的文件相当于独立的存在，就像jQuery一样，需要你在html进行引入之后才能使用。
-
CommonChunkPlugin 配置:
// 如果有其他CommonsChunkPlugin生成的文件，将会引入
// - If chunk has the name as specified in the chunkNames it is put in the list
// - If no chunk with the name as given in chunkNames exists a new chunk is created and added to the list
// 大概意思就是如果name在entry里面有，那就加入一个列表，如果entry里面没有，
// 那么就创建一个新chunk列表,如果chunks里面相同模块代码出现次数超过minChunks,那就添加到这个新创建的list里面。
new webpack.optimize.CommonsChunkPlugin({
name: "common",
chunks: ["a", "b"], //需要合并的文件
// minChunks:3 //最少在出现过多少次才将其打入common中
}),
//如果
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity
})DllPlugin 配置：
添加文件
const webpackConfig = {
name: "vendor",
entry: ["react", "react-dom"],
output: {
path: buildPath, // 输出文件路径
filename: "vendor.js",
library: "vendor_[hash]"
},
plugins: [
new webpack.DllPlugin({
name: "vendor_[hash]",
path: path.resolve(buildPath, "manifest.json")
})
]
}; name: "app",
+ dependencies: ["vendor"],
devtool: 'eval',
+ new webpack.DllReferencePlugin({
+ manifest: path.resolve(buildPath, "manifest.json")
+ }),6.文件分析(visualizer)
文件分析可以插件可以帮助查看我们生成的bundle.js和chunk的组成成分，可以根据这个进行代码优化。（开发环境使用）
+ const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
+ const Visualizer = require('webpack-visualizer-plugin');
+ new StatsWriterPlugin({
+ fields: null,
+ stats: { chunkModules: true }
+ }),
+ new Visualizer({
+ filename: './statistics.html' // visualizer 文件名称，在output 设置的path文件夹可以找到
+ })7.DefinePlugin(生产环境配置可以减少文件体积)
这个减少文件体积是相对的，webpack打包的时候回删去无用的代码，而react-dom等一些文件中都有很多下面的代码形式，这样webpack 和 DefinePlugin插件配合可以减少部分文件体积
if (process.env.NODE_ENV !== 'production') {}new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),8.OccurrenceOrderPlugin内置加入，不需要配置
9.UglifyJsPlugin（压缩文件，减小文件体积，生产环境使用）
webpack 本身内置uglifyjs,如果你想控制uglifyjs的版本，可以使用这个。
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
new uglifyJsPlugin({
compress: {
warnings: false
}
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。