共计 4278 个字符,预计需要花费 11 分钟才能阅读完成。
目录
上节:手动配置 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(待更新)
正文完