vue webpack3升级webpack4 踩坑记录
1 webpack4 需要node.js版本>= 10
2先卸载旧版本插件，重新安装新版本插件 webpack4版本中cli工具分离成了webpack核心库与webpack-cli命令行工具两个模块
npm uninstall webpack webpack-bundle-analyzer webpack-dev-server webpack-merge -Dnpm install webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge -D
我的版本 版本自己定义 [email protected]
npm uninstall copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -Dnpm install copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D4.升级vue-loader
npm uninstall vue-loader -Dnpm install [email protected] -D5.替换webpack相关插件，extract-text-webpack-plugin替换为mini-css-extract-plugin
npm uninstall extract-text-webpack-plugin -Dnpm install mini-css-extract-plugin -D配置修改
1.webpack.base.conf.js文件
module.exports = {
+ mode: process.env.NODE_ENV
}2. util.js文件
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// generate loader string to be used with extract text 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
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
+return [MiniCssExtractPlugin.loader].concat(loaders)
//把以下代码段去掉
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: {
// loader: 'vue-style-loader',
// options: {
// singleton: false // 为true表示将页面上的所有css都放到一个style标签内
// }
// },
// publicPath: '../../'
// })
} else {
return ['vue-style-loader'].concat(loaders)
}
}
3.webpack.prop.conf.js文件
（1）将MiniCssExtractPlugin代替ExtractTextPlugin
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
...
- new ExtractTextPlugin({
+ new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true,
}),（2）删除UglifyJsPlugin配置项
- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
- new UglifyJsPlugin({
- uglifyOptions: {
- compress: {
- warnings: false
- }
- },
- sourceMap: config.build.productionSourceMap,
- parallel: true
- })（3）删除CommonsChunkPlugin配置项
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- minChunks (module) {
- return (
- module.resource &&
- /\.js$/.test(module.resource) &&
- module.resource.indexOf(
- path.join(__dirname, '../node_modules')
- ) === 0
- )
- }
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'manifest',
- minChunks: Infinity
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'app',
- async: 'vendor-async',
- children: true,
- minChunks: 3
- }), （4）添加optimization配置项(与plugins平级)
+ optimization: {
+ splitChunks: {
+ chunks: 'async',
+ minSize: 30000,
+ minChunks: 1,
+ maxAsyncRequests: 5,
+ maxInitialRequests: 3,
+ automaticNameDelimiter: '~',
+ name: true,
+ cacheGroups: {
+ vendors: {
+ test: /[\\/]node_modules[\\/]/,
+ priority: -10
+ },
+ default: {
+ minChunks: 2,
+ priority: -20,
+ reuseExistingChunk: true
+ }
+ }
+ },
+ runtimeChunk: {
+ name: 'runtime'
+ }
+ },遇到的错误解决记录
1npm run dev启动项目报错【module.exports = merge(prodEnv, {TypeError: merge is not a function TypeError: merge is not a function at Object.
解决方案
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://xxxxxx.com"',
})
修改后
'use strict'
//新版本用解构出来merge模块，已经不能直接merge，因为依赖的源文件暴露方式也变了
const {merge}= require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://xxxxxx.com"',
})
- 注意是更改所有引入webpack-merge的地方
- 我的版本 "webpack-merge": "^5.7.3"
解决报错Cannot find module 'webpack-cli/bin/config-yargs'
解决方法：
卸载局部或者全局 webpack-dev-server
npm uninstall webpack-dev-server -g 卸载全局
npm uninstall webpack-dev-server -D 卸载局部(本地)
安装指定版本的 [email protected] 测试了下升级到4得是dev-server得是3以上才好使
npm i [email protected] -D 本地安装
RemovedpluginError: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
升级4以后这个也需要重新配置下
解决办法
myApp/build/webpack.base.conf.js 文件
optimization: {
splitChunks: {
cacheGroups: {
commoms: {
name: 'commons',
chunks: 'initial',
minChunks: 2
}
}
}
}注释一行代码
plugins: [
// new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],ValidationError: Invalid options object. copy Plugin has been initialized using an options object that does not match the API schema.
copy-webpack-plugin运行报错误 升级4以后也需要重新配置
错误配置 文件位置 myApp/build/webpack.dev.conf.js / myApp/build/webpack.prod.conf.js 这两都要改
new copyWebpackPlugin([
{
// from:path.join(__dirname,'assets'),
// to:'assets'
}
])
重新配置
new copyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetssubdirectory,
// ignore: ['.*']
}
],
}),TypeError: compilation.getLogger is not a function
copyWebpackPlugin 里的插件 copy-webpack-plugin 下载5.1.1版本的就可以了
npm uninstall copy-webpack-plugin -d
npm install cop[email protected] -d然后 myApp/build/webpack.dev.conf.js / myApp/build/webpack.prod.conf.js 文件里 配置 copy-pack配置恢复到以前的配置
new copyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetssubdirectory,
ignore: ['.*']
}
]),升级4 本应配置
new copyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetssubdirectory,
// ignore: ['.*']
}
],
}),但现在要恢复以前的配置 这块 具体原因还不知道，知道的解答下。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
