【webpack系列】从零搭建 webpack4+react 脚手架（四）
经过三个章节的学习，你已经学会搭建了一个基于webpack4的react脚手架。如果要更改配置，比如，你希望把编译后的js文件和css文件等单独放dist下的static目录下，你想想，是不是有点麻烦。你要去浏览webpack的配置文件，找到哪些配置项，然后去更改它，我们希望有个参数配置文件，只要更改参数配置，而无需更改webpack的配置文件。
1 添加参数配置文件
（1）在根目录创建config文件夹，在config文件夹内新建一个index.js文件，文件内容如下：
'use strict' const path = require('path') module.exports = { dev: { assetsSubDirectory: 'static', assetsPublicPath: '/', }, build: { assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', } }
我们定义了一部分配置参数，顾名思义，dev属性下的参数配置是针对开发环境，build属性下的参数配置是针对生产环境的。其中，assetsRoot是编译后的文件存放根路径，assetsSubDirectory是资源文件编译后存放的文件夹名称，assetsPublicPath是公共的路径。
（2）修改webpack.base.conf.js,如下
const path = require('path'); const config=require('../config'); const APP_PATH = path.resolve(__dirname, '../app'); module.exports = { entry: { app: './app/index.js', framework: ['react', 'react-dom'], }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, module: { rules: [ { test: /\.js?$/, use: "babel-loader", include: APP_PATH } ] } };
注意：我们在webpack.base.conf.js内配置了filename，那么dev环境下默认使用该配置，可以删除webpack.dev.conf.js内关于output的配置。
（3）路径生成方法：
路径的配置需要由assetsPublicPath和assetsSubDirectory以及具体的子路径组成，我们写一个公共的方法来生成路径。无论是开发环境还是生产环境，我们都可以复用该方法。我们在build文件夹下建立一个utils.js文件。内容如下：
const path = require('path') const config = require('../config') exports.assetsPath = function (_path) { const assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) }
（4）修改webpack.prod.conf.js
在webpack.prod.conf.js页面头部引入
const config=require('../config'); const utils=require('./utils');
修改output属性的内容
output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash:16].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') },
修改plugins内的相关配置：
new CleanWebpackPlugin([config.build.assetsRoot], { allowExternal: true }), //导出css new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[hash].css'), chunkFilename: utils.assetsPath('css/[id].[hash].css'), }),
（5）执行编译命令查看
npm run build
查看编译后的文件是否放在static目录下了。你可以修改参数配置文件，然后试试看吧。
2 更多的配置化
接下去我们会把更多的参数和变量进行配置化。
（1）index.html HTML模板的位置
在config.js文件的dev和build参数下都配置index属性：
index: path.resolve(__dirname, '../public/index.html'),
修改HtmlWebpackPlugin内template的值：
webpack.prod.conf.js的相关修改:
new HtmlWebpackPlugin({ template: config.build.index, inject: 'body', minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, }),
webpack.dev.conf.js的相关修改:
new HtmlWebpackPlugin({ template: config.dev.index, inject: true }),
（2）增加devServer 的配置
dev环境下，启动的端口号，代理相关，以及是否自动打开浏览器等等推荐可以放在参数配置文件内。
在config.js文件内增加相关配置参数：
proxyTable: {}, host: 'localhost', port: 8080, autoOpenBrowser: true,
修改webpack.dev.conf.js内的相关配置：
devServer: { host: config.dev.host, port: config.dev.port, contentBase: path.join(__dirname, '../public'), compress: true, historyApiFallback: true, hot: true, https: false, noInfo: true, open: config.dev.autoOpenBrowser, proxy: config.dev.proxyTable, }
更多的css loader加载器
我们在loader中配置了less加载器，如果我们要支持其他呢，比如sass，scss等等，显然，我们需要在rules数组增加配置。其实，这里可以写成公共的生成方法。并且我们把部分参数变成可配置。比如：是否开启cssModule等。
（1）前期准备，增加部分参数配置
修改config.js内的配置:
const path = require('path') module.exports = { base: { // 是否开启cssModule cssModule: true, // cssModule排除的目录, 其他css库可以放这里 cssModuleExcludePath: /public/ }, dev: { assetsSubDirectory: 'static', assetsPublicPath: '/', index: path.resolve(__dirname, '../public/index.html'), proxyTable: {}, host: 'localhost', port: 8080, autoOpenBrowser: true, // 是否生成sourceMap cssSourceMap: true, }, build: { assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', index: path.resolve(__dirname, '../public/index.html'), // 是否生成sourceMap productionSourceMap: true, } }
(2) 在utils.js内增加cssLoaders和styleLoaders方法：
exports.cssLoaders = function (options) { options = options || {} let cssLoader = { loader: 'css-loader', options: { importLoaders: 1, sourceMap: options.sourceMap } } if (options.cssModule) { cssLoader.options.modules = true; cssLoader.options.localIdentName = '[local]__[hash:7]'; } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } if (options.extract) { return [MiniCssExtractPlugin.loader].concat(loaders) } else { return ['style-loader'].concat(loaders) } } return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less', { javascriptEnabled: true, indentedSyntax: true }), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } exports.styleLoaders = function (options) { let output = [] const loaders = exports.cssLoaders(options) for (const extension in loaders) { const loader = loaders[extension] let loaderObj = { test: new RegExp('\\.' + extension + '$'), use: loader, } if (options.cssModule) { loaderObj.exclude = options.cssModuleExcludePath; } output.push(loaderObj) } if (options.cssModule) { options.cssModule = false const cssModuleLoaders = exports.cssLoaders(options) for (const extension in cssModuleLoaders) { const cssModuleLoader = cssModuleLoaders[extension] let cssModuleLoaderObj = { test: new RegExp('\\.' + extension + '$'), use: cssModuleLoader, } cssModuleLoaderObj.include = options.cssModuleExcludePath; output.push(cssModuleLoaderObj) } } return output }
(3) 在webpack.prod.conf.js内使用
确认是否引入了utils，如果没有引入，在页面上方增加代码：
const utils=require('./utils');
修改 module内的rules属性：
rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true, usePostCSS: true, cssModule:config.base.cssModule, cssModuleExcludePath:config.base.cssModuleExcludePath })
执行编译查看：
npm run build
(4) 在webpack.dev.conf.js内使用
确认是否引入了utils，如果没有引入，在页面上方增加代码：
const utils=require('./utils');
修改 module内的rules属性：
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true, cssModule:config.base.cssModule, cssModuleExcludePath:config.base.cssModuleExcludePath })
执行dev命令试试看
npm run dev
下一节会对 如果对编译后的文件进行gzip压缩，如何让开发环境的控制台输出更加高逼格，如何更好的对编译后的文件进行bundle分析等问题展开讨论。
