更新包
webpack的包，版本号前两位请和我写的完全一致，否则大概率失败。（因为我就是这样...）
"webpack": "^4.26.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.3",
"webpack-hot-middleware": "^2.25.3",
"webpack-merge": "^4.2.2"
自行斟酌。
"mini-css-extract-plugin": "^0.9.0",
"vue-loader": "^15.3.0",
"babel-loader": "^7.1.5",
"clean-webpack-plugin": "^4.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^4.5.2",
"less": "^4.1.3",
"optimize-css-assets-webpack-plugin": "^3.2.1",
"style-loader": "^3.3.1",
"url-loader": "^0.5.9",
"element-ui": "^2.10.1",
更新配置
build/utils.js
用mini-css-extract-plugin替代extract-text-webpack-plugin,
这里注意啦，不然element图片显示不出来了
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
- return ExtractTextPlugin.extract({
- use: loaders,
- fallback: 'vue-style-loader',
- // 解决打包后图片不可用的问题
- publicPath: '../../'
- })
+ return [{ loader: MiniCssExtractPlugin.loader,
+ options: {
+ publicPath: '../../'
+ }}].concat(loaders);
/build/webpack.base.conf.js
使用插件vue-loader
+ const {VueLoaderPlugin} = require('vue-loader')
+ plugins:[ new VueLoaderPlugin()],
{
test: /\.js$/,
loader: 'babel-loader',
- include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+ include: [resolve('src'), resolve('test')]
},
/build/webpack.dev.conf.js
配置optimization
+ mode: 'development',
devServer: {
+ inline: true, // 文件修改后实时刷新
+ progress: true, //输出编译进度条
}
+ optimization: {
+ noEmitOnErrors: true,
+ concatenateModules: false,
+ providedExports: false,
+ usedExports: false,
+ minimize: false,
+ splitChunks: {
+ chunks: 'all',
+ name: 'common',
+ },
+ runtimeChunk: {
+ name: 'runtime'
+ }
+ },
/build/webpack.prod.conf.js
用mini-css-extract-plugin替代extract-text-webpack-plugin
用splitChunks替代CommonsChunkPlugin
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+ optimization: {
+ noEmitOnErrors: true,
+ concatenateModules: true,
+ splitChunks: {
+ chunks: 'all',
+ name: 'common',
+ },
+ runtimeChunk: {
+ name: 'runtime'
+ }
+ },
- new ExtractTextPlugin({
- filename: utils.assetsPath('css/[name].[contenthash].css'),
- // Setting the following option to `false` will not extract CSS from codesplit chunks.
- // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
- // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
- // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
- allChunks: true,
- }),
+ new MiniCssExtractPlugin({
+ filename: utils.assetsPath('css/[name].[contenthash:29].css'),
+ allChunks: true
+ }),
- // split vendor js into its own file
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- minChunks (module) {
- // any required modules inside node_modules are extracted to vendor
- return (
- module.resource &&
- /\.js$/.test(module.resource) &&
- module.resource.indexOf(
- path.join(__dirname, '../node_modules')
- ) === 0
- )
- }
- }),
- // extract webpack runtime and module manifest to its own file in order to
- // prevent vendor hash from being updated whenever app bundle is updated
- new webpack.optimize.CommonsChunkPlugin({
- name: 'manifest',
- chunks: ['manifest', 'vendor', 'echartsVendor', 'app'],
- minChunks: Infinity
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'echartsVendor',
- chunks: ['vendor'],
- minChunks(module) {
- return module.resource && /echarts/.test(module.resource)
- }
- }),
- // This instance extracts shared chunks from code splitted chunks and bundles them
- // in a separate chunk, similar to the vendor chunk
- // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
- new webpack.optimize.CommonsChunkPlugin({
- name: 'app',
- async: 'vendor-async',
- children: true,
- minChunks: 3
- }),
报错
火狐报错： modules[moduleId] is undefined
谷歌报错：
解决：其他插件版本都对了，"webpack": "^4.4.0"需要升级到"webpack": "^4.26.1"
其他参考：
github.com/webpack/web…
github.com/webpack/web…
vue项目启动成功，网页空白页，控制台异常
解决：
参考：
blog.csdn.net/z2516305651…
blog.csdn.net/qq398577351…
blog.csdn.net/fangyana/ar…
(44条消息) vue-element-admin mini-css-extract-plugin （解决背景图片不显示问题）_dcaix89的博客-CSDN博客
