webpack开发环境基础配置

//1）五个核心 2）打包样式资源  3）打包HTML资源  4）打包图片资源  5）打包其他资源  6）devserver
const { resolve } = require('path');      //node内置核心模块，用来处理路径问题。resolve用来拼接绝对路径的方法
const HtmlWebpackPlugin = require('html-webpack-plugin');  //打包HTML资源，使用这个插件需要下载安装 npm install --save -dev html-webpack-plugin 
module.exports = { 
	entry: './src/js/index.js',   //入口起点 
	output: {                     //输出配置
		filename: 'js/built.js',    //输出文件名 
		// 输出路径 
		path: resolve(__dirname, 'build')    //__dirname nodejs的变量，代表当前文件的目录绝对路径 
	}, 
	//loader的配置 
	module: { 
		rules: [ 
			// 详细loader配置 
			// 不同文件必须配置不同loader处理 
			{ 
				//匹配哪些文件。处理less资源 
				test: /\.less$/, 
				//使用哪些loader进行处理
				use: [
					// use 数组中loader执行顺序：从右到左，从下到上 依次执行 
					// 创建style标签，将js中的样式资源插入进行，添加到head中生效 
					'style-loader', 
					// 将css文件变成commonjs模块加载js中，里面内容是样式字符串 
					'css-loader', 
					// 将less文件编译成css文件 // 需要下载less-loader和less
					'less-loader',
				] ,
			}, 
			{ 
				// 处理图片资源 
				// 问题：默认处理不了html中img图片 
				test: /\.(jpg|png|gif)$/, 
				// 使用一个 loader 
				// 下载 url-loader file-loader   //命令：npm install --save -dev html-loader url-loader file-loader 
				loader: 'url-loader', 
				options: { 
					// 图片大小小于8kb，就会被base64处理 
					// 优点: 减少请求数量（减轻服务器压力） 
					// 缺点：图片体积会更大（文件请求速度更慢） 
					limit: 8 * 1024, 
					// 给图片进行重命名 
					// [hash:10]取图片的hash的前10位 
					// [ext]取文件原来扩展名 
					name: '[hash:10].[ext]', 
					// 问题： 因为url-loader默认使用es6模块化解析， 而html-loader引入图片是commonjs 
					// 解析时会出问题：[object Module] 
					// 解决：关闭url-loader的es6模块化，使用commonjs解析 
					esModule: false, 
					outputPath: 'imgs' ,
				} ,
			}, 
			{ 
				// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理） 
				test: /\.html$/,
				loader: 'html-loader' ,
			}, 
			// 打包其他资源(除了html/js/css资源以外的资源) 
			{ 
				exclude: /\.(html|js|css|less|jpg|png|gif)/,   // 排除css/js/html资源
				loader: 'file-loader', 
				options: {
					name: '[hash:10].[ext]', 
					outputPath: 'media'
				}
			}
		]
	}, 
	// plugins 的配置
	plugins: [ 
		// html-webpack-plugin 
		// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS） 
		// 需求：需要有结构的HTML文件 
		new HtmlWebpackPlugin({ 
			template: './src/index.html' ,
		})
	], 
	// 模式 （开发/生产）
	mode: 'development',  // 开发模式 
	// mode: 'production'
	devServer: { 
		contentBase: resolve(__dirname, 'build'), // 项目构建后路径
		compress: true,   // 启动 gzip 压缩  
		port: 3000,       // 端口号 
		open: true ,      // 自动打开浏览器 
	},
};

此文章由尚硅谷熊键老师课程整理出来。