入口
entry(string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })),每个模块的入口
entry: { element: ['element-ui'], vue: ['vue', 'axios', 'vue-router', 'vuex'], app: './src/main.js' },
输出
output位于对象最*键(key),包括了一组选项,指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。
output: { path: path.resolve(__dirname, outputPath), publicPath: host, filename: PATH_DIST.js + '[name].js' + (isProduction ? '?[chunkhash:8]' : '') },
path(string)
output 目录对应一个绝对路径。模块打包输出的文件路径
publicPath 对应模块在html的引用路径(加载外部资源)
此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到
output.path
选项指定的目录下module
rules
创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
resolve
这些选项能设置模块如何被解析,一般用于快速引入模块包
resolve: { alias: {'@': path.resolve(__dirname, '../src'), 'lib': path.resolve(__dirname, '../static'), 'scss': path.resolve(__dirname, '../src/scss/') }, extensions: [".js"] }
alias
创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 文件夹下的常用模块:
如上的alias,在组件内引用store
import storefrom '../../store';
可以写成
import store from @/store';
extensions
自动解析确定的扩展,可以不写文件后缀。
plugins
选项用于以各种方式自定义 webpack 构建过程
webpack.optimize.CommonsChunkPlugin
new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3, }),
有助于提取这些依赖到共享的 bundle 中,来避免重复打包
CopyWebpackPlugin
new CopyWebpackPlugin([{ from: path.resolve(__dirname, '../static'), to: '', ignore: ['.*'] }]),
直接拷贝到dist文件,不通过编译
webpack.DefinePlugin
new webpack.DefinePlugin({ 'process.env.NODE_ENV': isProduction ? '"production"' : '"development"', 'process.env.BASE_API': BASE_API_MAP[process.env.NODE_ENV], 'process.env.UPLOADFILE': UPLOADFILE_MAP[process.env.NODE_ENV] }),
将一些配置插入环境中,在业务代码内可以使用 process.env 访问
webpack.optimize.UglifyJsPlugin
new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } })
代码的压缩配置
HtmlWebpackPlugin
new HtmlWebpackPlugin({ title: '消息推送平台', template: 'index.html', filename: '../index.html', inject: false, path: host, chunks: ['element', 'vue', 'app'] }),
打生产包时候读取的配置
Server