在本系列文章的基础上，我对脚手架配置进行了一些优化整理，基于 Webpack4 和 Vue，下面是文章链接：
基于 Webpack4 + Vue 的多页应用解决方案（一）
基于 Webpack4 + Vue 的多页应用解决方案（二）
上文主要分享了 webpack.config.base.js 这个配置文件，本文将介绍其他三个配置文件 webpack.config.dev.js、webpack.config.prod.js 和 webpack.config.lint.js。
webpack.config.dev.js
这个配置文件主要用来在开发环境使用，需要 webpack-dev-server 这个插件提供支持。该文件的配置如下：
// 引入基础配置文件
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入配置文件
const config = require("./config");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
// 配置 webpack-dev-server
devServer:{
// 项目根目录
contentBase:config.devServerOutputPath,
// 错误、警告展示设置
overlay:{
errors:true,
warnings:true
}
}
});
其中，webpack-merge 这个插件用来对配置文件进行合并，在 webpack.config.base.js 的基础上合并新的配置。
devServer 配置项的 contentBase 项是项目的根目录，也就是我们的 dist 目录，区别在于这个 dist 目录不是硬盘上的 dist 目录，而是存在于内存中的 dist 目录。在使用 webpack-dev-server 时，将会以这个内存中的 dist 目录作为根目录。
devServer 的 overlay 选项中设置了展示错误和警告，这样当代码发生错误时，会将错误信息投射到浏览器上，方便我们开发。
这里将 contentBase 指向了 config 中的一个配置：
devServerOutputPath:"../dist",
webpack.config.prod.js
该配置文件用来在生产环境启用，主要用来压缩、合并和抽取 JavaScript 代码，并将项目文件打包至硬盘上的 dist 文件夹中。
// 引入基础配置
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入 webpack
const webpack = require("webpack");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
plugins:[
// 代码压缩
new webpack.optimize.UglifyJsPlugin({
// 开启 sourceMap
sourceMap: true
}),
// 提取公共 JavaScript 代码
new webpack.optimize.CommonsChunkPlugin({
// chunk 名为 commons
name: "commons",
filename: "[name].bundle.js",
}),
]
});
在抽取公共的 JavaScript 代码时，我们将公共代码抽取为 commons.bundle.js，这个公共代码的 chunk（name）名就是 commons，在使用 html-webpack-plugin 自动生成 HTML 文件时会引用这个 chunk。
webpack.config.lint.js
这项配置用来进行代码检查，配置如下：
const webpackBase = require("./webpack.config.base");
const webpackMerge = require("webpack-merge");
const config = require("./config");
module.exports = webpackMerge(webpackBase,{
module:{
rules:[
{
test: /\.js$/,
// 强制先进行 ESLint 检查
enforce: "pre",
// 不对 node_modules 和 lib 文件夹中的代码进行检查
exclude: /node_modules|lib/,
loader: "eslint-loader",
options: {
// 启用自动修复
fix:true,
// 启用警告信息
emitWarning:true,
}
},
]
},
devServer:{
contentBase:config.devServerOutputPath,
overlay:{
errors:true,
warnings:true
}
}
});
在使用 eslint-loader 时，我们设置了 enforce:"pre" 选项，这个选项表示在处理 JavaScript 之前先启用 ESLint 代码检查，然后再使用 babel 等 loader 对 JavaScript 进行编译。
在 eslint-loader 的 options 选项中，设置了自动修复和启用警告信息，这样当我们的代码出现问题时，ESLint 会首先尝试自动修复（如将双引号改为单引号），对于无法自动修复的问题，将以警告或错误的信息进行展示。
配置 .eslintrc.js
要想使用 ESLint 进行代码检查，除了使用 eslint-loader 之外，还需针对 ESLint 本身进行配置，这就需要一个 .eslintrc.js 文件。该文件的配置如下：
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
},
extends: 'eslint:recommended',
parserOptions: {
sourceType: 'module',
},
rules: {
'comma-dangle': ['error', 'always-multiline'],
indent: ['error', 2],
'linebreak-style': ['error', 'unix'],
quotes: ['error', 'single'],
semi: ['error', 'always'],
'no-unused-vars': ['warn'],
'no-console': 0,
},
};
对于 ESLint 还可以有更多的配置，大家可以自行参考一下。
总结
通过三篇文章，大致将 webpack 多页面脚手架的配置文件都介绍了。文章写得可能有不连贯的地方，我会在下篇文章中提供所有的配置文件。
完。
网友评论