Vue2项目升级Webpack4
按以下package.json配置安装依赖包。
webpack3.x要使用webpack-dev-server2.xwebpack4.x要使用webpack-dev-server3.x
行高亮模块需要注意对应的版本。package.json 依赖包如下
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^14.2.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^4.46.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^4.1.0"
}
修改配置文件
// webpack.base.conf.js文件 增加mode属性
// 这里同NODE_ENV会导致fullTextSearchPlugin插件报错不显示搜索框
module.exports = {
+ mode: // env.NODE_ENV
}
// util.js文件
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
function generateLoaders(loader, loaderOptions) {
...
// 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: 'vue-style-loader'
- })
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// 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'
+ }
+ }
问题
问题1: Error: Cannot find module 'webpack/bin/config-yargs'
// webpack-dev-server@2.9.1 不支持webpack@4.32.2,安装一个webpack-dev-server@3.11.2版本
问题3: Please install 'webpack-cli' in addition to webpack itself to use the CLI
// webpack@4.x版本移除了webpack-cli，需要安装webpack-cli
问题3: TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
// 安装html-webpack-plugin@3.2.0 不要装最新版本，会导致打包错误
问题4: Module build failed (from ./node_modules/eslint-loader/index.js)
// 安装更高版本的 eslint-loader@4.0.2
问题5: TypeError: Cannot read property 'vue' of undefined
// vue-loader 和 webpack 不兼容导致的 安装vue-loader@16.8.3
问题6: Module build failed (from ./node_modules/vue-loader/dist/index.js): Error:
@vitejs/plugin-vue requires vue (>=3.2.13) or
@vue/compiler-sfc to be present in the dependency tree.
// 安装vue-loader@14.4.2
问题7: Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin.
Make sure to include VueLoaderPlugin in your webpack config.
// 安装vue-loader@14.4.2
问题8: 页面报错 Cannot assign to read only property 'exports' of object '#<Object>'
// 以下两种方式均可
// 1、找到.babelrc 文件，在插件位置 plugins 给一个空的数组 "plugins": []
// 2、在同样的文件里面加上一句 "plugins": ["transform-es2015-modules-commonjs"]