本文共 2859 字，大约阅读时间需要 9 分钟。
Webpack 内置了很多功能。我们只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下，再去查详细的使用文档。
entry是必填的，是配置模块的入口，Webpack 执行构建的第一步就是从这个入口开始递归解析。
module.exports = { entry: { app: './src/main.js' },} | 类型 | 例子 | 含义 |
|---|---|---|
| string | ‘./app/entry’ | 入口模块的文件路径，可以是相对路径。 |
| array | [’./app/entry1’, ‘./app/entry2’] | 入口模块的文件路径，可以是相对路径。 |
| object | { a: ‘./app/entry-a’, b: [’./app/entry-b1’, ‘./app/entry-b2’]} | 配置多个入口，每个入口生成一个 Chunk。 |
output 配置如何输出最终想要的代码
module.exports = { output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: "bundle.js", // 配置发布到线上资源的 URL 前缀 // http://localhost:8080/xj/ publicPath: "/xj", // 输出文件都放到 dist 目录下 path: path.resolve(__dirname, "./dist") }}; module 配置如何处理模块。
rules 配置模块的读取和解析规则，通常用来配置 Loader。module.exports = { module: { rules: [ { // 命中 JavaScript 文件 test: /\.js$/, // 用 babel-loader 转换 JavaScript 文件 // ?cacheDirectory 表示传给 babel-loader 的参数，用于缓存 babel 编译结果加快重新编译速度 use: ['babel-loader?cacheDirectory'], // 只命中src目录里的js文件，加快 Webpack 搜索速度 include: path.resolve(__dirname, 'src') }, { // 命中 SCSS 文件 test: /\.scss$/, // 使用一组 Loader 去处理 SCSS 文件。 // 处理顺序为从后到前，即先交给 sass-loader 处理，再把结果交给 css-loader 最后再给 style-loader。 use: ['style-loader', 'css-loader', 'sass-loader'], // 排除 node_modules 目录下的文件 exclude: path.resolve(__dirname, 'node_modules'), }, { // 对非文本文件采用 file-loader 加载 test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/, use: ['file-loader'], }, ] }} Resolve 配置 Webpack 如何寻找模块所对应的文件
module.exports = { resolve: { //在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。也就是说当遇到 require('./data') 这样的导入语句时，Webpack 会先去寻找 ./data.js 文件，如果该文件不存在就去寻找./data.vue,ha ./data.json 文件， 如果还是找不到就报错。 extensions: ['.js', 'vue', '.json'], alias: { // $ 符号来缩小范围到只命中以关键字结尾的导入语句，只会命中以 vue 结尾的导入语句。import Vue from 'vue' 被 alias 等价替换成了 import Button from 'vue/dist/vue.esm.js' 'vue$': 'vue/dist/vue.esm.js', // 1. import Index from '@/pages/index.vue' 被 alias 等价替换成了 import Index from 'src/pages/index.vue' '@': resolve('src'), } },} Plugin 用于扩展 Webpack 功能，几乎所有 Webpack 无法直接实现的功能都能在社区找到开源的 Plugin 去解决
module.exports = { plugins: [ // 编译时配置的全局变量 new webpack.DefinePlugin({ //当前环境为开发环境 'process.env': config.dev.env }), //热更新插件 new webpack.NoEmitOnErrorPlugin(), //不触发错误,即编译后运行的包正常运行 new HtmlWebpackPlugin({ //自动生成html文件,比如编译后文件的引入 filename: 'index.html', //生成的文件名 template: 'index.html', //模板 inject: true }), new FriendlyErrorsPlugin() //友好的错误提示 ] new webpack.HotModuleReplacementPlugin(), ],} 转载地址：http://nzrgn.baihongyu.com/