webpack

webpack

webpack.config.js

const path = require('path')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')
const TerserPlugin = require('terser-webpack-plugin')
const BundleAnalyZerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
	entry: 'app.js', //工程资源的入口
	output: {
		path: path.join(__dirname, 'dist'), //绝对路径
		filename: 'bundle.js'
	},
	devServer: {
		port: 3000, //服务端口
		publicPath: 'dist'，
		// HMR热缓存
		hot: ture
	},
	// 压缩配置
	optimization: {
		minimizer: [new TerserPlugin({
			// 加快构建速度
			cache: true,
			terserOptions: {
				compress: {
					unused: true,
					drop_debugger: true,
					drop_console: true,
					dead_code: true
				}
			}
		})]
	},
	// 文件加载器-loader
	module: {
		rules: [
			{
				test:/\.css$/,
				use: [
					'style-looder',
					'css-loader'
				]
			}
		]
	},
	pligins: [
		new UglifyJSPlugin(),
		// HMR
		new webpack.HotModuleReplacementPlugin()
		// 构建结果图示
		new BundleAnalyZerPlugin()
	]，
	module.exports = {
		module: {
			rules: [
				{
					test: /\.jsx?/,
					exclude: /node_modules/,
					use: {
						loader: 'babel-loader',
						options: {
							babelrc: false,
							presets: {
								require.resolve('@babel/preset-react'),
								[require.resolve('@babel/preset-env', {modules:false})],
								cacheDirectory: true
							}
						}
					}
				}
			]
		}
	}
}

配置babel

在package.json里

"babel": {
	"presets": ["@babel/preset-env"]	//ES6转换成ES5
}

在.babelrc里（优先级最高）

{
	"preset": ["@babel/preset-env"]
}

webpack打包优化 *

压缩

减少查找

减少解析

多线程并行打包：HappyPack、threa-loader（把load放在线程池了，必须放在所有loader之前）

fast-sass-loader

tree-shaking：消除无用代码