本文记录webpack2中的常用配置项和插件
1、常用配置
module.exports = {
cache: true, //开启缓存功能，这样只有变化的文件才会重新加载，可提升构建速度
entry:{},
output: {},
module: {},
resolve: {},
externals:{},
plugins:{}
}
1.1 entry
-
单入口时key为app，value写上相对于webpack.config.js的入口文件路径即可，如：
单入口
注意：value还可以是数组，这种情况要注意顺序，确保主入口在数组的末位上！
-
多入口时key为app的是主入口，其他key可自己取名，但要加引号，如：
多入口
注意：有几个入口，webpack就会打几个包(bundle)出来，打出来的包的文件名与这里的key对应，比如上图会打出类似app.js和vendor.js两个文件(这里省略了hash)。
1.2 output
- path
规定打包后的文件放哪儿，必须是绝对路径，常取值为：
__dirname+’/build’或path.resolve(__dirname,’build’) - filename
规定打包后的文件的名字，对于单入口文件，可以取一个固定的名字，如’build.js’，对于多入口文件，要使用[name].bundle.js或[id].bundle.js来对应，其中name和id是根据多入口文件对象的属性动态确定的 - publicPath
规定线上地址，打包后的文件中资源的引用地址会根据这个地址而改变，一般取为’/assets/’ - chunkFilename
webpack可以做代码分割，这个属性规定那些做了代码分割的块（chunk）的名字
默认使用 [id].js
1.3 module
- rules：数组
数组中每一项类似于这样配置：
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory=true', //当使用多个loader时，请用use而不是loaders代替loader
include: [resolve('src'), resolve('test')],
exclude: [resolve('node_modules')]
}
有时还会有query或options配置，二者都是use:{options}的简写，所以在用了use后就不需要这两个配置了，如下(一个loader对应一个options，使用多个loader时用use)：
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'less-loader',
options: {
noIeCompat: true
}
}
]
- noParser
防止 webpack 解析任何与给定正则表达式相匹配的文件,忽略大型库文件(library)可以提高构建性能
noParse: /jquery|lodash/
1.4 resolve
配置模块如何解析
- root:字符串或值为字符串的数组，绝对路径，配置alias中依赖项的基地址
- alias
创建 import 或 require 的别名，来确保模块引入变得更简单。
对象，key为变量名，值为路径。key指定的变量将成为全局变量，比如想在任何文件中都是用jquery而不必每次都显示引入，可以这样{$:jquery文件的地址}，地址可以是相对地址(相对root指定)，也可是绝对地址(使用path.resolve(__dirname,’jquery’)). - extensions:数组，文件扩展名，某文件的扩展名在该数组中时，该文件在引入时可省略扩展名，常取值有[‘’ , ’.js’ , ‘.json’ , ‘.scss’ , ‘.vue’]
- modules
告诉 webpack 解析模块时应该搜索的目录
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'), //实际返回了src的路径，会优先于node_modules搜索
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'styles': resolve('src/styles'),
'utils':resolve('src/utils'),
'demos':resolve('src/demos'),
'cnode':resolve('src/cnode')
}
}
1.5 externals
提供了不从 bundle 中引用依赖的方式。也就是所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。比如jquery是用script的方式从html引入的，要想在其他模块中引入的时候就可以使用这个配置
// html
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
// 配置
externals: {
$: 'jQuery' //key不加引号，value是脚本里的全局对象，这里value还可以是数组或对象，但表示的含义大不一样，可参看[这里](http://www.css88.com/doc/webpack2/configuration/externals/)
}
// 其他模块引入的方式
import $ from 'jquery';
1.6 performance、stat
performance：某个打包后的包超过给定阈值时给出提示
stat:控制webpack打包后输出哪些信息
1.7 plugins
plugins是除module外最为重要的配置了，插件机制提供了loader无法完成的功能，常用的plugin有：
- CommonsChunkPlugin
- DefinePlugin
- HtmlWebpackPlugin
- UglifyjsWebpackPlugin
- ExtractTextWebpackPlugin
- OptimizeCSSPlugin
- CompressionWebpackPlugin
- SourceMapDevToolPlugin
- FriendlyErrorsPlugin
- BundleAnalyzerPlugin
2、插件用法配置
- CommonsChunkPlugin
new webpack.optimize.CommonsChunkPlugin(options)
options的配置：
name：抽取出公共代码后的模块名，若没有filename项，该项也决定打包后的文件名
chunks：从哪些模块中抽取公共代码，若省略，则从所有模块中抽取（一般是从入口模块抽）
minChunks:number|Infinity|function(module, count) -> boolean
为数字A时，表示模块必须被引用超过A次才提取到公共代码里；为infinity时，表示无穷，不抽取任何模块；为函数时，函数返回true就抽取，实例：
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function(module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
})
- DefinePlugin
允许你创建一个在编译时可以配置的全局常量。
new webpack.DefinePlugin({
'process.env': config.dev.env
})
注意这里定义的常量是在业务模块中使用的，并不是在webpack这些配置文件中使用，因为webpack本身运行在node环境下，node中自身就有process等全局变量。如在入口main.js中不用声明process.env就可以直接使用process.env判断环境
- HtmlWebpackPlugin
生成一个HTML5文件，该文件的 body 中使用script 标记引用了所有 webpack bundle。若有多个webpack入口点，它们都将包含在生成的HTML中，使用script标记引用。如果有任何CSS资源在webpack的 output 中，（例如，使用ExtractTextPlugin提取的CSS）那么这些资源将被包含在HTML head 中，使用<link>标记引用。实例：
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
//生成一个文件 dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
配置：
-
title: 生成的html中的title -
filename: 生成的html的名字 -
template: 用哪个模板来生成html -
inject:true | 'head' | 'body' | false取true或body时，all javascript 放在body底部,'head'放head里 -
favicon:指定生成的html的favicon -
minify:{...} | false压缩生成的html -
hash:true | false是否给所有scripts和css添加hash -
cache: 只有当html中内容变化了才重新输出，默认true -
showErrors:true | false错误细节是否写到html，默认true -
chunks: 只添加哪些chunk -
excludeChunks: 去掉哪些chunk
- UglifyjsWebpackPlugin
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
})
// 或使用这个代替
var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS: {
output: {
comments: false,
beautify: false
},
compress: {
warnings: false,
drop_console: true
}
}
}),
配置项和uglify一样的
- ExtractTextWebpackPlugin
将所有的 入口chunk (entry chunks) 中的 require("style.css") 或import 'style.css' 移动到分开的 css 文件.
需要两步：1、rules中配置 ExtractTextPlugin.extract 2、plugins中配置new ExtractTextPlugin("styles.css")
const ExtractTextPlugin = require("extract-text-webpack-plugin");
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
- OptimizeCSSPlugin
去除重复的CSS代码
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
// 配置
plugins: [
new OptimizeCSSPlugin()
]
- CompressionWebpackPlugin
压缩资源
var CompressionPlugin = require("compression-webpack-plugin");
// 配置
plugins: [
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
]
asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
test： 所有匹配该正则的资源都会被处理。默认值是全部资源。
threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
- BundleAnalyzerPlugin
分析打包构成
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin({
// Can be `server`, `static` or `disabled`.
// In `server` mode analyzer will start HTTP server to show bundle report.
// In `static` mode single HTML file with bundle report will be generated.
// In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
analyzerMode: 'server',
// Host that will be used in `server` mode to start HTTP server.
analyzerHost: '127.0.0.1',
// Port that will be used in `server` mode to start HTTP server.
analyzerPort: 8888,
// Path to bundle report file that will be generated in `static` mode.
// Relative to bundles output directory.
reportFilename: 'report.html',
// Module sizes to show in report by default.
// Should be one of `stat`, `parsed` or `gzip`.
// See "Definitions" section for more information.
defaultSizes: 'parsed',
// Automatically open report in default browser
openAnalyzer: true,
// If `true`, Webpack Stats JSON file will be generated in bundles output directory
generateStatsFile: false,
// Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
// Relative to bundles output directory.
statsFilename: 'stats.json',
// Options for `stats.toJson()` method.
// For example you can exclude sources of your modules from stats file with `source: false` option.
// See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
// Log level. Can be 'info', 'warn', 'error' or 'silent'.
logLevel: 'info'
})
]
网友评论