经过三个章节的学习，你已经学会搭建了一个基于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文件内增加相关配置参数：
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
}
]
}
};0
修改webpack.dev.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
}
]
}
};1
更多的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方法：
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
}
]
}
};3
(3) 在webpack.prod.conf.js内使用
确认是否引入了utils，如果没有引入，在页面上方增加代码：
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
}
]
}
};4
修改 module内的rules属性：
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
}
]
}
};5
执行编译查看：
npm run build
(4) 在webpack.dev.conf.js内使用
确认是否引入了utils，如果没有引入，在页面上方增加代码：
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
}
]
}
};4
修改 module内的rules属性：
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
}
]
}
};8
执行dev命令试试看
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
}
]
}
};9
下一节会对 如果对编译后的文件进行gzip压缩，如何让开发环境的控制台输出更加高逼格，如何更好的对编译后的文件进行bundle分析等问题展开讨论。
还没有评论，来说两句吧...