Webpack4

webpack4新特性

• 新增webpack-cli脚手架 集成webpack命令
• npx 命令
• 零配置，开箱即用默认入口文件为src目录下的index.js,出口为dist目录下的main.js
• 新增mode模式切换，默认为生产环境 需手动设置为开发模式 mode：development

基本配置

let path = require('path')
module.exports = {
	optimization:{ // 优化项
		minimizer:[
			new OptimizeCssAssetsWebpackPlugin() // 压缩css文件
			new UglifyJsPlugin({
				cache:true, // 是否缓存
				parallel:true, // 是否并发请求 
				sourceMap:true // es6高阶语法产生映射
			}) // 压缩js文件
		]
	}
	devServer:{ // 开发服务器的配置
		port:3000,
		progress：true,
		contentBase:'./build',
		open:true,
		compress:true
	}
	mode:'development', // 模式 production development
	entry:'./src/index.js',//入口
	output:{
		filename:'bundle.[hash:8]js',//打包后的文件名 增加hsah之后，防止覆盖
		path:path.resolve(__dirname,'build) // 路径必须是一个绝对路径
	}
}

常用插件配置

• HtmlWebpackPlugin 在内存中生成html文件，并将js文件自动插入
• MiniCssExtractPlgin 抽离css文件，生成单独的文件，插入到link标签内
• OptimizeCssAssetsWebpackPlugin 压缩css文件
• UglifyJsPlugin 压缩JS文件

  plugins:[ // 数组 放着所有的webpack的插件
  	new HtmlWebpackPlugin({
  		template:'./src/index.html', //指定模板html文件
  		filename:'index.html',
  		minify:{
  			removeAttributeQuotes:true, // 去掉html中的双引号
  			collapseWhitespace:true,//压缩html代码为一行
  		},
  		hash:true
  	}),
  	new MiniCssExtractPlgin({
  		
  	})
  ]

常用模块配置

• 解析样式文件
• css-loader
• style-loader
• less-loader
• file-loader 处理图片
• postcss-loader 给样式增加前缀 需要配置postcss.config.js文件 文件导出autofix

  module:{
  	route:[ 
  		// 处理css文件
  		// css-loader 解析css文件@import语法 
  		// style-loader 把css文件插入到head标签中
  		// loader的顺序是从右到左
  		// loader写成对象模式，可以设置更多的参数
  		{test:/\.css$/,use:[
  				{
  					loader:'style-loader'.
  					options:{
  						insertAt:'top'
  					}
  				},
  				'css-loader'
  			]
  		},
  		// 处理less文件
  		{test:/\.css$/,use:[
  				MiniCssExtractPlgin.loader, // 抽离less文件
  				'css-loader', // 解析@import语法 路径
  				'less-loader',// 解析less文件
  				'postcss-loader' // 给类似transform样式增加webkit前缀
  			]
  		},
  		// 处理js文件
  		{test:/\.js$/,
  		 use:[
  			 loader:'babel-loader',
  			 options:{
  				 presets:[
  					 '@babel/preset-env'
  				 ],
  				 plugins:[
  					 ["@babel/plugin-proposal-decorators",{"legacy":true}]
  				 ]
  			 },
  			 exclude:/node_modules/ //排除node包中的js文件
  		 ]},
  		 // 处理图片
  		 {test:/\.(png|jpg|gif)/,
  		  //use:'file-loader' // 处理后返回一个hash戳前缀名字的图片
  		  use:'url-loader' // 通常用这个loader处理图片，转成base
  		 },
  		 // 处理html文件的图片
  		 {test:/\.html$/,
  			use:'html-withimg-loader'
  		 }
  	]
  }

对于框架 多个文件多次引用raect react-dom 如何优化

• 新建一个动态链接库 抽离公共第三方包 webpack.config.react.js
• 并在dist目录下script标签引用这个动态链接库
• 在webpack.config.js住配置文件中使用

  let path = require(path);
  let webpack = require(webpack)
  module.exports = {
  	mode:'development',
  	entry:{
  		react:['react','react-dom']
  	},
  	output:{
  		filename:'_dll_[name].js',//产生的文件名
  		path:path.reslove(__dirname,'dist),
  		library:'_dll_[name]'
  	},
  	plugins:[
  		new webpack.DllPlugin({
  			name:'_dll_[name]',
  			path:path.resolve(__dirname,'dist','manifest.json')
  		})
  	]
  }

plugins:[
	new webpack.DllReferencePlugin({
		manifest:path.resolve(__dirname,'dist','manifest.json')
	})
]

代码分割 形成公用模块

module.exports = {
	optimiztion:{ // 优化项目
		splitChunks:{ // 分割代码块
			cacheGroups:{ // 缓存组
				common:{ // 公共模块
					chunks:'initial',
					minSize:0,
					minChunks:2
				},
				vendor:{
					test:/node_modules/, //把第三方公用的库抽离
					chunks:'initial',
					minSzie:0,
					minChunks:2
				}
			}
		}
	}
}