webpack配置

// webpack.config.js 命令文件
// 配置文件
const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  //每次打包先清除dist目录
const HtmlWebpackPlugin = require('html-webpack-plugin');  //把打包好的文件路径生成script 加入 index.html中
// console.log(__dirname,"path")
// console.log(path.resolve(__dirname),"path2")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  //分离css成文件

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');  //压缩css

const TerserJSPlugin = require('terser-webpack-plugin');


let htmlPlugins = ['index','other'].map(chunkName => {
	return new HtmlWebpackPlugin({
		template: `./${chunkName}.html`,
		filename:`${chunkName}.html`,
		chunks: [ chunkName]
	})
})

module.exports = {
	// entry:"./src/index.js", //单个的入口文件
	// output:{
	// 	// hash  chunkHash  contentHash
	// 	filename:'bundle.js',
	// 	path: path.resolve(__dirname , "dist" )
	// },
	optimization:{
		minimizer:[   //压缩的css和js
			new OptimizeCssAssetsPlugin(),
			new TerserJSPlugin()
		]  
	},
	
	entry:{
		index:'./src/index.js',
		other:'./src/other.js'
	},
	output:{
		filename: '[name].js',
		path:path.resolve(__dirname, "dist")
	},
	
	module:{
		rules:[
			// 运行的是从下往上运行  
			// {
			// 	test:/.css$/,
			// 	use:'css-loader'
			// },
			// {
			// 	test:/.css$/,
			// 	use:'style-loader',
			// 	enforce:'post'   //pre  优先加载   post表示最后加载  
				
			// }
			
			// 另一种写法
			{
				test:/.css$/,
				// use:['style-loader', 'css-loader']  ,//从右往左解析
				use:[
					// 'style-loader',
					{
					loader:MiniCssExtractPlugin.loader  //用了分离的css， 上边的style-loader就不需要了
				},
				{
					loader:'css-loader',
					options:{
						importLoaders:2  //用后面的几个loader来解析
					}
				},'postcss-loader','less-loader'
				]  //从右往左解析
				
			},
			{
				test:/.less$/,
				use:['style-loader','css-loader','less-loader']
			},
			// {
			// 	test:/.(jpg|jpeg|gif)$/,
			// 	use:{
			// 		loader: 'file-loader',
			// 		options:{
			// 			name:'img/[name].[ext]',
						
			// 		}
			// 	}
			// },
			{
				test:/.(jpg|jpeg|gif)$/,
				use:{
					loader:'url-loader',
					options:{
						limit:10*1024, //100kb
						outputPath:'/img',
						publicPath:'http://test/img'
					}
				}
			}
		]
	},
	devServer:{ //在内存中打包,所有的内容是在根目录
		port:'7777',
		open:true,
		compress:true, 
		contentBase: 'static',  //启动配置一个可访问的静态资源文件
		hot:true
	},
	plugins:[
		new MiniCssExtractPlugin({
			filename:'css/main.css'  //设置分离出的css存放的目录和文件名
		}),
		
		// new CleanWebpackPlugin({
		// 	cleanOnceBeforeBuildPatterns:['cc/*','!cc/a.js']
		// })  //清空输出的目录
		new CleanWebpackPlugin(),
		
		...htmlPlugins
		// new HtmlWebpackPlugin({  
		// 	template:'./index.html',  //依赖的模板文件
		// 	hash:true,
		// 	filename:'index.html'  ,//打包后的html文件
		// 	minify:{
		// 	  removeAttributeQuotes: true , //删除引号
		// 		  collapseWhitespace: true  // 删除空格
		// 	},
		// 	chunks:['index']
		// }),
		
		// new HtmlWebpackPlugin({
		// 	template:'./index.html',  //依赖的模板文件
		// 	hash:true,
		// 	filename:'other.html'  ,//打包后的html文件
			
		// 	chunks:['other']
		// })
		
	]
}

1.  html-webpack-plugin   把打包好的文件路径生成script 加入 index.html中。

2. clean-webpack-plugin   每次打包先清除dist目录。


3.webpack-dev-server  创建本地服务器，自动重新构建，自动打开浏览器并刷新


4.解析css  需要： css-loader  style-loader

5.解析less 需要 ：  less  less-loader

sass：    node-sass  sass-loader

stylus：  stylus  stylus-loader


7.   css私有前缀    postcss-loader (样式处理工具)   autoprefixer （私有前缀的插件） 

8.分离css的插件   mini-css-extract-plugin

9. file-loader  url-loader   图片文件处理