webpack打包1.0版本

1.在项目的根目录中新建一个webpack.config.js
2.直接代码

/**
 * 
 * 
 * 
 * 开发环境配置
 */
// 这是内部自带的
const { reslove } =require('path')

// 引入插件
const HtmlWebpackPlugin =require('html-webpack-plugin')
module.exports = {
	// 入口文件
	entry;'./src/index.js'
	// 输出文件的路径
	output:{
		// 文件名
		filename:'built.js',
		// 路径、使用绝对路径们，需要使用path模块
		path:reslove(__dirname,'build')
	},
	module:{
		rules:[
			// loader配置
			{
				// 这是处理less,如果是又scss 继续在下面配置
				test:/\.less$/,
				use:[
					'style-loader',
					'css-loader',
					'less-loader'
				]
			},
			{
				test:/\.css$/,
				use:[
					'style-loader',
					'css-loader',
				]
			},
			{
				// 处理图片资源
				test:/\.(jpg|png|gif)$/,
				// 只能处理样式中的图片资源
				loader:'url-loader',
				options:{
					// 8k以下的图片会编码成base64格式
					limit:8*1024,
					// 取前十位hash值为名字
					name:'[hash:10].[ext]',
					// 关闭es6模块化 开启commjs
					esModule:false,
				}
			},
			{
				// 处理html中的图片资源
				//  m默认开启commjs
				test:/\.html$/,
				loader:'html-loader'
			},
			{
				// 处理那其他资源
				)/
				exclude:/\.(html|hs|css|less|png|gif|jpg)/,
				loader:'file-loader',
				options:{
					name:'[hash:10].[ext]'
				}
			}
			
		],
		plugins:[
			// 插件处理html资源
			new HtmlWebpackPlugin({
				// 指定模板
				template:'./src/index.html'
			})
		],
		// 开发环境设置
		devServer:{
			// 
			contentBase: reslove(__diername,'build'),
			// 压缩
			compress:true,\,
			// 端口号
			port:8848,
			// 自动打开浏览器
			open:true
		},
		mode:'development'
	}
}