webpack的常用配置

 webpack 中文文档

webpack.dev

/* 
	1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
	2.该文件要符合CJS模块化规范
*/

//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');
//引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//css相关loader的配置
const baseCssLoader = ['style-loader','css-loader']
//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'development',//工作模式
  entry: './src/js/app.js', //入口
  output: { //出口(输出)
    path: resolve(__dirname, 'build'), //输出文件的路径
    filename: 'js/app.js' //输出文件的名字
	},
	//module.rules中配置的一个一个的loader
	module: {
    rules: [
			//配置解析css
      {
        test: /\.css$/, //该loader要处理的文件
        use: [...baseCssLoader]
			},
			//配置解析less
			{
        test: /\.less$/, //该loadesr要处理的文件
        use: [...baseCssLoader,'less-loader']
			},
			//配置解析样式中的图片
			{
        test: /\.(png|jpg|gif|bmp)$/,
        use: [{
					loader:'url-loader',
					options:{
						outputPath:'imgs', //配置图片加工后存放的位置
						// publicPath:',/build/imgs' //配置图片引入时前缀路径
						name:'[hash:5].[ext]', //配置生成图片的名字+后缀
						limit:8 * 1024 //图片大小，小于8KB时，将图片转为base64编码
					}
				}]
			},
			//配置解析html中的图片
			{
				test: /\.(html)$/,
				use: ['html-loader']
			},
			//配置解析字体文件
			{
        exclude: /\.(html|less|css|png|jpg|bmp|js|gif|json)$/,
        use: [{
					loader:'file-loader',
					options:{
						outputPath:'media', //配置图片加工后存放的位置
						name:'[hash:5].[ext]', //配置生成图片的名字+后缀
					}
				}]
			}
    ]
	},
	//plugins中专门用于配置插件，插件必须经过实例化这一环节
	plugins: [
		//实例化HtmlWebpackPlugin
		new HtmlWebpackPlugin({
			//以指定文件为模板创建新的html(1. 结构和原来一样 2. 会自动引入打包的资源)
			template:'./src/index.html' //模板的位置
		})
	],
	devServer:{
		port:5000,//开启服务器的端口号
		open:true,//自动打开浏览器
		hot:true//开启模块热更新(热模替换)
	}
};

webpack.prod

/* 
	1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
	2.该文件要符合CJS模块化规范
*/

//引入Node中一个内置的path模块，专门用于解决路径问题
const {resolve} = require('path');
//引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入MiniCssExtractPlugin，用于提取css为单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//css相关loader的配置
const baseCssLoader = [
	MiniCssExtractPlugin.loader,
	'css-loader',
	{
		loader: "postcss-loader",
		options: {
			postcssOptions: {
				plugins: [
					"postcss-preset-env",
				],
			},
		},
	},
]

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'production',//工作模式
  entry: './src/js/app.js', //入口
  output: { //出口(输出)
    path: resolve(__dirname, '../build'), //输出文件的路径
		filename: 'js/app.js', //输出文件的名字
		publicPath:'/build/'
	},
	//module.rules中配置的一个一个的loader
	module: {
    rules: [
			//配置解析css
      {
        test: /\.css$/, //该loader要处理的文件
        use: [...baseCssLoader]
			},
			//配置解析less
			{
        test: /\.less$/, //该loadesr要处理的文件
        use: [...baseCssLoader,'less-loader']
			},
			//配置解析样式中的图片
			{
        test: /\.(png|jpg|gif|bmp)$/,
        use: [{
					loader:'url-loader',
					options:{
						outputPath:'imgs', //配置图片加工后存放的位置
						// publicPath:'/build/imgs', //配置图片引入时前缀路径
						name:'[hash:5].[ext]', //配置生成图片的名字+后缀
						limit:8 * 1024 //图片大小，小于8KB时，将图片转为base64编码
					}
				}]
			},
			//配置解析html中的图片
			{
				test: /\.(html)$/,
				use: ['html-loader']
			},
			//配置解析字体文件
			{
        exclude: /\.(html|less|css|png|jpg|bmp|js|gif|json)$/,
        use: [{
					loader:'file-loader',
					options:{
						outputPath:'media', //配置图片加工后存放的位置
						name:'[hash:5].[ext]', //配置生成图片的名字+后缀
					}
				}]
			}
    ]
	},
	//plugins中专门用于配置插件，插件必须经过实例化这一环节
	plugins: [
		//实例化HtmlWebpackPlugin
		new HtmlWebpackPlugin({
			//以指定文件为模板创建新的html(1. 结构和原来一样 2. 会自动引入打包的资源)
			template:'./src/index.html' //模板的位置
		}),
		//实例化MiniCssExtractPlugin
		new MiniCssExtractPlugin({
			filename:'/css/index.css'
		})
	]
};