目录
上节： 手动配置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(待更新)