Webpack4.x+Vue2.x+Vue-Loader升级开发环境

最近根据项目的要求需要将Webpack从2升级到Webpack4.x,升级过程遇到很多坑

 

package.json文件依赖更新如下：

    "@babel/core": "^7.7.2",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/preset-env": "^7.7.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "fibers": "^4.0.2",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass": "^1.23.3",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"

webpack.config.js配置更新如下：

const path = require('path');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
	entry: './app/main.js',
	output: {
	  path: path.resolve(__dirname, 'output'),
	  filename: 'all.js',
	  publicPath: "/public"
	},
	module: {
	  rules: [
	    {
	      test: /\.js$/,
	      exclude: /node_modules/,
	      use: {
	        loader: 'babel-loader',
	        options: {
	          presets: ['@babel/preset-env'],
	          plugins: ["@babel/plugin-proposal-object-rest-spread"]
	        }
	      }
	    },
	    {
			test: /\.vue$/,
			loader: 'vue-loader',
			options: {
				loaders: {
					js: 'babel-loader'
				}
			}
		},
		{
	        test: /\.css$/,
	        use: [
	          process.env.NODE_ENV == 'production'
	            ? 'vue-style-loader'
	            : MiniCssExtractPlugin.loader,'css-loader','less-loader'
	        ]
	      }
	  ]
	},
	plugins: [
		new MiniCssExtractPlugin({filename:"style.css"}),
		new VueLoaderPlugin()
	],
	resolve: {
	    alias: {
	      'vue$': 'vue/dist/vue.esm.js'
	    }
	}
};

 

新的开发环境加入了ES6语法的解析和对象结构的识别，同时对vue文件的样式表进行了抽离和压缩