目录结构：
├── README.md ├── build │ ├── build.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js └── static
config 环境配置
config 配置文件用来配置 devServer 的相关设定，通过配置 NODE_ENV 来确定使用何种模式（开发、生产、测试或其他）
config |- index.js #配置文件 |- dev.env.js #开发模式 |- prod.env.js #生产模式
index.js
输出目录 assetsPublicPath: '/', // publicPath：指定资源文件引用的目录 proxyTable: {}, // 代理示例： proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",}] // 开发服务器变量设置 host: 'localhost', port: 8080, autoOpenBrowser: true, // 自动打开浏览器devServer.open errorOverlay: true, // 浏览器错误提示 devServer.overlay notifyOnErrors: true, // 配合 friendly-errors-webpack-plugin poll: true, // 使用文件系统(file system)获取文件改动的通知devServer.watchOptions // source map cssSourceMap: false, // develop 下不生成 sourceMap devtool: 'eval-source-map' // 增强调试 可能的推荐值：eval, eval-source-map(推荐), cheap-eval-source-map, cheap-module-eval-source-map 详细：https://doc.webpack-china.org/configuration/devtool }, build: { // index模板文件 index: path.resolve(__dirname, '../dist/index.html'), // 路径 assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', // bundleAnalyzerReport bundleAnalyzerReport: process.env.npm_config_report, // Gzip productionGzip: false, // 默认 false productionGzipExtensions: ['js', 'css'], // source map productionSourceMap: true, // production 下是生成 sourceMap devtool: '#source-map' // devtool: 'source-map' ? } }dev.env.js
build Webpack配置
build |- utils.js #代码段 |- webpack.base.conf.js #基础配置文件 |- webpack.dev.conf.js #开发模式配置文件 |- webpack.prod.conf.js #生产模式配置文件 |- build.js #编译入口
实用代码段 utils.js
基础配置文件 webpack.base.conf.js
基础的 webpack 配置文件主要根据模式定义了入口出口，以及处理 vue, babel 等的各种模块，是最为基础的部分。其他模式的配置文件以此为基础通过 webpack-merge 合并。
开发模式配置文件 webpack.dev.conf.js
开发模式的配置文件主要引用了 config 对于 devServer 的设定，对 css 文件的处理，使用 DefinePlugin 判断是否生产环境，以及其他一些插件。
生产模式配置文件 webpack.prod.conf.js
build.js 编译入口
输出编译文件 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n'); //error if (stats.hasErrors()) { console.log(chalk.red(' 编译失败出现错误.\n')); process.exit(1); } //完成 console.log(chalk.cyan(' 编译成功.\n')) console.log(chalk.yellow( ' file:// 无用，需http(s)://.\n' )) }) })下载本文