config文件夹下最主要的文件就是index.js了，在这里面描述了开发和构建两种环境下的配置，前面的build文件夹下也有不少文件引用了index.js里面的配置。下面是代码注释：
// see for documentation. var path = require('path') module.exports = { // 构建产品时使用的配置 build: { // webpack的编译环境 env: require('./prod.env'), // 编译输入的index.html文件 index: path.resolve(__dirname, '../dist/index.html'), // webpack输出的目标文件夹路径 assetsRoot: path.resolve(__dirname, '../dist'), // webpack编译输出的二级文件夹 assetsSubDirectory: 'static', // webpack编译输出的发布路径 assetsPublicPath: 'https://www.jb51.net/', // 使用SourceMap productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin // 默认不打开开启gzip模式 productionGzip: false, // gzip模式下需要压缩的文件的扩展名 productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, // 开发过程中使用的配置 dev: { // webpack的编译环境 env: require('./dev.env'), // dev-server监听的端口 port: 8080, // 启动dev-server之后自动打开浏览器 autoOpenBrowser: true, // webpack编译输出的二级文件夹 assetsSubDirectory: 'static', // webpack编译输出的发布路径 assetsPublicPath: 'https://www.jb51.net/', // 请求代理表，在这里可以配置特定的请求代理到对应的API接口 // 例如将'/api/xxx'代理到'www.example.com/api/xxx' proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. // 是否开启 cssSourceMap cssSourceMap: false } }
config/dev.env.js、config/prod.env.js和config/test.env.js
这三个文件就简单设置了环境变量而已，没什么特别的。
五、总结
到这里对模板项目的build和config文件夹下面的内容已经基本了解，知道了在实际使用中根据自己的需求修改哪里的配置，例如，当我有需要配置代理的时候要在config/index.js里面的dev.proxyTable设置，当我修改了资源文件夹名称static同样需要在config/index.js里面设置。总体感觉入门了webpack，但不算真正理解。webpack的插件好多，在看代码的过程中遇到不认识的插件都是要去查看很多文档（github，npm或者博客），感觉实际过程中更改插件配置或者使用新插件也是需要费点心思钻文档和网上其他博客介绍。