目录
上节： 手动配置vue-cli上
上节目录：
生成环境配置需求
- 每次内容变化，输出的文件名hash也会变化
- 每次打包清理dist目录
- 代码分割（分割第三方库）
- css分割
以下都是修改build/webpack.prod.js
配置输出文件名
// 省略
output: {
filename: 'js/[name].[contenthash:10].js'
},
// 省略清理输出目录(dist)
安装插件：npm i clean-webpack-plugin -D
// 省略
const CleanWebpackPlugin = require('clean-webpack-plugin');
output: {
filename: 'js/[name].[contenthash:10].js'
},
plugins: [
new HTMLPlugin({
template: './index.html'
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin(),
new CleanWebpackPlugin()
]
// 省略代码分割
配置optimization属性：
// 省略
optimization: {
// 配置代码分割
splitChunks: {
// 要分割哪些模块：all（推荐）, async(默认，只分隔异步代码), and initial
chunks: 'all'
}
}
// 省略css分割
安装插件：npm i mini-css-extract-plugin -D
// 省略
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
rules: [{
// 识别.vue文件
test: /\.vue$/,
loader: 'vue-loader',
}, {
// 用于识别vue文件中的script块
test: /\.js$/,
loader: 'babel-loader',
}, {
// 用于识别vue文件中的style块
test: /\.(css|less)$/,
/*
MiniCssExtractPlugin.loader代替vue-style-loader
*/
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}, {
test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
loader: 'url-loader'
}]
},
plugins: [
new HTMLPlugin({
template: './index.html'
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
// ... 忽略 vue-loader 插件
new MiniCssExtractPlugin({
filename: '[name].[contenthash:10].css'
})
],
// 省略现在build/webpack.prod.js全部内容应该如下：
注意修改mode选项
const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/main.js',
output: {
filename: 'js/[name].[contenthash:10].js'
},
module: {
rules: [{
// 识别.vue文件
test: /\.vue$/,
loader: 'vue-loader',
}, {
// 用于识别vue文件中的script块
test: /\.js$/,
loader: 'babel-loader',
}, {
// 用于识别vue文件中的style块
test: /\.(css|less)$/,
/*
MiniCssExtractPlugin.loader代替vue-style-loader
*/
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}, {
test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
loader: 'url-loader'
}]
},
plugins: [
new HTMLPlugin({
template: './index.html'
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
// ... 忽略 vue-loader 插件
new MiniCssExtractPlugin({
filename: 'styles/[name].[contenthash:10].css'
})
],
optimization: {
// 配置代码分割
splitChunks: {
// 要分割哪些模块：all（推荐）, async(默认，只分隔异步代码), and initial
chunks: 'all'
}
}
};然后修改package.json的scripts属性：
// 省略
"scripts": {
"dev": "webpack-dev-server --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"
},
// 省略然后npm run build，看能否正确打包：
这样生成环境的配置就差不多乐。
抽离公共配置
生成和开发环境的配置项与许多重复的，我们要把这些重复的项写到webpack.base.js里去。
build/webpack.base.js:
const HTMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {resolve} = require('path');
module.exports = {
entry: resolve(__dirname, '../src/main.js'),
module: {
rules: [{
// 识别.vue文件
test: /\.vue$/,
loader: 'vue-loader',
}, {
// 用于识别vue文件中的script块
test: /\.js$/,
loader: 'babel-loader',
}, {
test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
loader: 'url-loader'
}]
},
plugins: [
new HTMLPlugin({
template: resolve(__dirname, '../index.html')
}),
// 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块
new VueLoaderPlugin()
]
};build/webpack.dev.js:
const webpack = require('webpack');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
mode: 'development',
// 起node服务
devServer: {
port: 4200,
hot: true
},
module: {
rules: [{
// 用于识别vue文件中的style块
test: /\.(css|less)$/,
/*
vue-style-loader基于style-loader
https://www.npmjs.com/package/vue-style-loader
*/
use: ['vue-style-loader', 'css-loader', 'less-loader']
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});build/webpack.prod.js:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
mode: 'production',
output: {
filename: 'js/[name].[contenthash:10].js'
},
module: {
rules: [{
// 用于识别vue文件中的style块
test: /\.(css|less)$/,
/*
MiniCssExtractPlugin.loader代替vue-style-loader
*/
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}]
},
plugins: [
new CleanWebpackPlugin(),
// ... 忽略 vue-loader 插件
new MiniCssExtractPlugin({
filename: 'styles/[name].[contenthash:10].css'
})
],
optimization: {
// 配置代码分割
splitChunks: {
// 要分割哪些模块：all（推荐）, async(默认，只分隔异步代码), and initial
chunks: 'all'
}
}
});安装插件：npm i webpack-merge -D
然后试下npm run dev和npm run build是否正常
下节：手动配置vue-cli——集成typescript