一、简介
Webpack是一个模块打包器。Webpack可以把一个单独的任务管理器捆绑在一起，但是由于社区开发的webpack插件，bundler和task runner之间的界限变得模糊了。有时候，这些插件被用来执行通常在webpack
之外完成的任务，例如清理构建目录或部署构建。
- 参考资料：https://survivejs.com/webpack/what-is-webpack/ （英文网站，需要翻译）
二、webpack的扩展
- html-webpack-plugin ：建立一个html模板，自动插入打包的js
//...
const HtmlWebpackPlugin = require('html-webpack-plugin');
//...
plugins:[
new HtmlWebpackPlugin({ title: 'Webpack demo' })
]
- favicons-webpack-plugin： 处理favicons
- SourceMapDevToolPlugin：资源地图映射
plugins: [
new webpack.SourceMapDevToolPlugin({
// Match assets just like for loaders.
test: string | RegExp | Array,
include: string | RegExp | Array,
// `exclude` matches file names, not package names!
exclude: string | RegExp | Array,
// If filename is set, output to this file.
// See `sourceMapFileName`.
filename: string,
// This line is appended to the original asset processed. For
// instance '[url]' would get replaced with an url to the
// sourcemap.
append: false | string,
// See `devtoolModuleFilenameTemplate` for specifics.
moduleFilenameTemplate: string,
fallbackModuleFilenameTemplate: string,
module: bool, // If false, separate sourcemaps aren't generated.
columns: bool, // If false, column mappings are ignored.
// Use simpler line to line mappings for the matched modules.
lineToLine: bool | {test, include, exclude}
}),
]
- webpack.optimize.UglifyJsPlugin：压缩j
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
// Drop `console` statements
drop_console: true
}
})
]
- webpack-merge：可以把分开配置的config合并，分开生产环境和调试环境
const merge = require('webpack-merge');
const commonConfig= {...};
var config;
config = merge(commonConfig, {});
- webpack-dev-server：自刷新页面，更改代码后可以自动刷新，最常用的module
exports.devServer = function(options) {
return {
//如果devserver的基本配置有问题，可以设置watchOptions去解决
watchOptions: {
// Delay the rebuild after the first change
aggregateTimeout: 300,
// Poll using interval (in ms, accepts boolean too)
poll: 1000
},
devServer: {
// Enable history API fallback so HTML5 History API based
// routing works. This is a good default that will come
// in handy in more complicated setups.
historyApiFallback: true,
// Unlike the cli flag, this doesn't set
// HotModuleReplacementPlugin!
hot: true,
inline: true,
// Display only errors to reduce the amount of output.
stats: 'errors-only',
// Parse host and port from env to allow customization.
//
// If you use Vagrant or Cloud9, set
// host: options.host || '0.0.0.0';
//
// 0.0.0.0 is available to all network devices
// unlike default `localhost`.
host: options.host, // Defaults to `localhost`
port: options.port // Defaults to 8080
},
plugins: [
// Enable multi-pass compilation for enhanced performance
// in larger projects. Good default.
new webpack.HotModuleReplacementPlugin({
multiStep: true
})
]
};
}
- source-map：init时会慢，之后rebuild快
devtool: 'source-map'
