webpack常用配置---总结

webpack常用配置—总结

const path = require('path') //绝对路径,__dirname代表当前的项目路径下
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports = {
	mode: 'development',
	entry: './src/main.js',
	
	/* 生产环境屏蔽下面的语句，否则影响速度 */
	output: {
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist')
	},
	devServer: {
		contentBase: './dist',
		hot: true
	},
	module: {
		rules: [{
			//vue-loader
			test: /\.vue$/,
			loader: 'vue-loader'
		}, {
			//url-loader
			test: /\.(jpeg|jpg|png|svg)$/,
			use: [{
				loader: 'url-loader',
				options: {
					limit: 50
				}
			}]
		}, {
			test: /\.css$/,
			use: ['style-loader', 'css-loader']
		}, {
			//bable
			test: /\.js$/,
			exclude: /node_modules/,
			use: {
				loader: "babel-loader",
				options: {
					presets: ['@babel/preset-env']
				}
			}
		}]
	},
	plugins: [
		new VueLoaderPlugin(),
		new HtmlWebpackPlugin({
			template: './index.html'
		}),
		new CleanWebpackPlugin(),
		/* new webpack.HotModuleReplacementPlugin() */
	],
	resolve: {
		alias: {
			'vue': 'vue/dist/vue.js'
		}
	}
}