【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.assetsSubDirectoryreturn 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: {// 是否开启cssModulecssModule: true,// cssModule排除的目录, 其他css库可以放这里cssModuleExcludePath: /public/},dev: {assetsSubDirectory: 'static',assetsPublicPath: '/',index: path.resolve(__dirname, '../public/index.html'),proxyTable: {},host: 'localhost',port: 8080,autoOpenBrowser: true,// 是否生成sourceMapcssSourceMap: true,},build: {assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',index: path.resolve(__dirname, '../public/index.html'),// 是否生成sourceMapproductionSourceMap: 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 = falseconst 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分析等问题展开讨论。

转载于:https://www.cnblogs.com/nianzhilian/p/webpack.html