webpack 为何会出现
- 随着 web 技术的发展，越来越多的网站一改传统的网页形式，进化成了 webapp 模式。
- 单页面模式开发 webapp，不同的页面资源（js，图片，css）都要通过异步的方式加载进来，对前端的开发流程及资源的组织有了更高的要求。
- 为了更好地组织项目中涉及到的各种各样的，碎片化的资源，同时解放开发人员的双手，使更多的精力投入到开发工作中来，保证整个项目的代码清晰流畅，同时能完美运行在各浏览器上，需要有一个模块化的系统，来完成除了开发以外的工作。
webpack 如何配置
如下是一个简单的webpack配置文件（一般是 webpack.config.js）。更详细的配置可以参见中文文档
const webpack = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/index'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].min.js'
},
module: {
rules: [{
test: /\.js[x]?$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: [
path.resolve(__dirname, 'node_modules')
],
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}]
},
devtool: 'source-map',
plugins: [
new htmlWebpackPlugin({
hash: true,
template: './src/tpl.html',
inject: 'body'
})
],
devServer: {
contentBase: path.join(__dirname, 'dist')
}
}
entry
项目的入口起点，这里的内容可以是字符串／字符串数组／对象。对于单页面应用可能只有一个入口文件，多页面应用可以有多个入口文件。
entry: {
home: "./home.js",
about: "./about.js",
contact: "./contact.js"
}
output
- output.path
该字段定义了输出文件的目录，所有的 bundle 文件都会输出到该目录下面。
- output.name
该字段定义了每个 bundle 的名称，可以包括各种各样自定义的样式。
// 只有一个输出文件，直接命名
filename: "bundle.js"
// 使用入口名
filename: "[name].bundle.js"
// 使用内部chunk id
filename: "[id].bundle.js"
// 使用每次构建中，生成的唯一 hash
filename: "[name].[hash].bundle.js"
// 使用chunk内容的hash
filename: "[chunkhash].bundle.js"
module.rules
创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
- test
正则匹配模块文件 - include
路径白名单，该规则只会对这个目录下的文件起作用（这里可以用数组） - exclude
路径黑名单 - loader
加载器 - options
loader 的附加参数
plugins
webpack 插件。上面代码中的插件（htmlWebpackPlugin）是一个读取 html 模版的插件，它可以自动生成 index.html 文件，同时正确添加打包完成的 js 文件。
下面是一个具有多个插件的配置例子
var webpack = require('webpack')
// 导入非 webpack 默认自带插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
// 在配置中添加插件
plugins: [
// 构建优化插件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-[hash].min.js',
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
}),
new ExtractTextPlugin({
filename: 'build.min.css',
allChunks: true,
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 编译时(compile time)插件
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
}),
// webpack-dev-server 强化插件
new DashboardPlugin(),
new webpack.HotModuleReplacementPlugin(),
]
