Vue课程30-讲解webpack中@的原理和作用

 

const path = require('path')
 
// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
	// 指定要复制哪个页面
	template: './src/index.html',
	// 指定复制出来的文件名和存放路径
	filename: './index.html',
})
const {CleanWebpackPlugin}=require("clean-webpack-plugin")
module.exports = {
    //开发调试阶段 设置为eval-source-map
    // devtool:"eval-source-map",
    //实际发布的时候 建议可以选择nosources-source-map或者关闭sourceMap
    devtool:"nosources-source-map",
	mode: 'development',
	// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
	plugins: [htmlPlugin,new CleanWebpackPlugin()],
	//指定要处理的路径
	entry: path.join(__dirname, './src/index.js'),
	//输出的文件路径
	output: {
		//存放的目录
		path: path.join(__dirname, 'dist'),
        //js存放目录
		filename: 'js/bundle.js',
	},
    performance: {
 
        hints: false
    },
	devServer: {
		open: true,
	},
	module: {
		rules: [
            //css样式
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
            //less样式
			{
				test: /\.less$/,
				use: ['style-loader', 'css-loader', 'less-loader'],
			},
            //处理图片文件的loader outPath=images 图片存放路径
            {
				test: /\.jpg|png|gif$/,
				use: "url-loader?limit=4700000000&outputPath=images",
			},
            //排除第三方包node_modules
            {
				test: /\.js$/,
				use: "babel-loader",
                exclude:/node_modules/
			},
 
		],
        resolve:{
            alias:{
                '@':path.join(__dirname,"/src/")
            }
        }
		//定义了不同模块的loader
	},
}