webpack3.0升级4.0记录
一、为什么升级webpack3.0
使用webpack3.0开发构建时非常慢,经常10几秒才能正常编译构建完成,开发效率很低。
4.0有如下优点
1、4.0的treeshaking,代码更轻量,减少冗余代码。
2、使用了splitChunkPlugin, 告别了commonChunkPlugin,代码分割更完善了。
3、引入mode参数
3.1、 production参数:
- 更小的输出尺寸
- 运行时的快速加载代码
- 省略只在开发时的代码
- 不暴露源代码或者路径
- 快捷使用输出assets
3.2、 development参数
- 浏览器内调试更好的工具
- 在一个快速的开发周期,更快的增量编译
- 更好的运行时错误提示
4、构建时间提速98%。
二、安装必要依赖
- webpack4对应的webpack-dev-server从2.x必须升级到3.x,否则会报错
// webpack版本安装4.0
// webpack4对应的webpack-dev-server从2.x必须升级到3.x,否则会报错
npm i -D webpack webpack-cli webpack-dev-server webpack-merge
// loader重新安装
npm i less less-loader url-loader vue-loader webpack-hot-middleware css-loader file-loader -D
babel-loader style-loader
// babel 插件重新安装
npm i -D @babel/core babel-plugin-dynamic-import-node @babel/preset-env @babel/helper-vue-jsx-merge-props @babel/plugin-transform-runtime babel-plugin-istanbul
// element-ui用dll打包后, el-table组件不能展示 不知是不是兼容问题
// 安装element
npm i element-ui@2.10.1 -S
// 安装插件
npm i clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin -D
- 包升级 删除package.json的对应包的行 然后执行 npm i xxx -D 升级
// package.json命令
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.config.js",
"analyz": "cross-env npm_config_report=true npm run build",
},
三、修改新的配置
1、webpack.base.config.js修改
webpack.DllReferencePlugin是配合dll打包一起使用,提升编译速度,不用重复构建第三方库
'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');
+ const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const Happypack = require('happypack');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const {
BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
});
const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
+ filename: '[name].[hash].js',
publicPath:
process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src')
},
modules: [path.resolve(__dirname, '../node_modules')]
},
resolveLoader: {
modules: [path.resolve(__dirname, '../node_modules')],
extensions: ['.js', '.vue', '.json'],
mainFields: ['loader', 'main']
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
+ options: {
+ cacheDirectory: './node_modules/.cache/vue-loader',
+ cacheIdentifier: 'vue-loader'
+ },
include: [resolve('src')]
},
{
test: /\.js$/,
use: [
+ 'cache-loader', // 缓存loader
{
loader: 'babel-loader',
options: {
cacheDirectory: true //缓存目录
}
}
], //必须是数组
include: [resolve('src')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[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 webpack.DllReferencePlugin({
+ // 这里的上下文要与dllplugin保持一致
+ // context: path.join(__dirname, '../'),
+ manifest: require('../static/js/vendor-manifest.json')
+ }),
+ new VueLoaderPlugin