vue-cli3已经发布有一段时间了，它是基于 webpack4 构建，并带有合理的默认配置，可以平稳衔接，适合绝大部分应用优化过的内部的 webpack 配置，无需关注配置问题。现在用vue-cli2搭建的项目webpack还是保持着3.6.0版本。所以我用了最新版本的webpack(4.20.2)模仿vue-cli2的项目目录结构搭建了vue单页面应用。
vue-cli2的搭建的项目把所有关于webpack配置文件放到build文件夹中(vue-cli3搭建的项目没有此文件夹)，其中包括开发环境webpack.dev.conf.js、生产环境webpack.prod.conf.js、以及所有环境都需要的基本配置webpack.base.conf.js、工具函数utils.js、config/index.js文件中设置了各种参数。
先来看webpack.base.conf.js,无论在什么环境，都需要对图片、字体、.vue文件、.js文件进行编译。代码如下
const path = require('path')
const utils = require('./utils')
const config = require('../config')
// vue-loader v15版本需要引入此插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 用于返回文件相对于根目录的绝对路径
const resolve = dir => path.posix.join(__dirname, '..', dir)
// 创建ESlint相关rules
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src')],
options: {
// 更友好、更详细的提示
formatter: require('eslint-friendly-formatter'),
// 只给出警告，开发有很好的体验，emitError为true会阻止浏览器显示内容
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
entry: resolve('src/main.js'),
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue': resolve('node_modules/vue/dist/vue.js'),
'components': resolve('src/components'),
'assets': resolve('src/assets')
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
// 编译.vue文件, vue-cli2还包含vue-loader.conf.js,
// 但vue-loader15已经将大部分配置改为默认，所以没必要新建个文件
test: /\.vue$/,
loader: 'vue-loader',
options: {
// 配置哪些引入路径按照模块方式查找
transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
},
{
test: /\.js$/, // 利用babel-loader编译js，使用更高的特性，排除npm下载的.vue组件
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
)
},
{
test: /\.(png|jpe?g|gif|svg)$/, // 处理图片
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 处理字体
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
plugins: [
new VueLoaderPlugin()
],
// 配置是否 polyfill 或 mock 某些 Node.js 全局变量和模块
node: {
// Vue源码已经包含了setImmediate
setImmediate: false,
// 设置empty是为了防止那些mock Node原生模块来对客户端造成安全问题
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
webpack.dev.conf.js用于开发环境，通过webpack-merge合并base.conf配置，配置如下：
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
module: {
rules: utils.styleLoaders({
sourceMap: config.dev.cssSourceMap,
usePostCSS: true
})
},
devtool: config.dev.devtool, // cheap-module-eval-source-map编译更快
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
// 热加载必备
new webpack.HotModuleReplacementPlugin(),
// 模板
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// 静态资源路径设置
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// port被占用会更改端口号
process.env.PORT = port
devWebpackConfig.devServer.port = port
// 添加友好提示错误的一个插件
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
开发环境中对.css进行了转换，利用到了工具utils.styleLoaders函数，那我们先看一下utils.js,
const path = require('path')
const config = require('../config')
const packageConfig = require('../package.json')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 返回文件绝对路径
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
// cssloader兼容各种预处理语言(less|sass|scss|stylus)
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// webpack4.0版本以上采用MiniCssExtractPlugin 而不使用extract-text-webpack-plugin
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 ['vue-style-loader'].concat(loaders)
}
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
//创建友好错误提示的格式
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
})
}
}
可以看出来，styleLoaders方法是将所有cssLoaders导出的各种样式loader遍历按照配置格式返回数组，cssLoaders主要功能就是将默认cssloader、postcssLoader（用于兼容、自带浏览器前缀）、还有其他预处理语言loader的配置。
生产环境配置如下：
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const pordWebpackConfig = merge(baseWebpackConfig, {
mode: 'production',
output: {
path: config.build.assetsRoot,
// chunkhash是根据内容生成的hash, 易于缓存
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
// 将css样式单独提取出文件
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
plugins: [
// webpack4.0版本以上采用MiniCssExtractPlugin 而不使用extract-text-webpack-plugin
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
}),
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
}),
// 当vendor模块不再改变时, 根据模块的相对路径生成一个四位数的hash作为模块id
new webpack.HashedModuleIdsPlugin(),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
],
// 优化相关, 暂时占个位置
// optimization: {
// splitChunks: {
// chunks: 'all'
// },
// runtimeChunk: true
// },
})
module.exports = pordWebpackConfig
生产环境配置讲导出的文件都带有hash值，是因为hash值可以更好的缓存，当内容不变时，hash不变，文件就可以缓存下来。