webpack-实战配置案例（打包样例PWATS打包配置WebpackDevServer提升打包速度多页面打包配置）

Posted 2021-08-29 火腿肠烧烤大赛冠军

lodach以及自定义文件的打包

module.exports = {
	mode: 'production',
	entry: './src/index.js',
	//已使用包【避免重复引用、不打包该包】
	externals: 'lodash',
	output: {
		//输出位置
		path: path.resolve(__dirname, 'dist'),
		//输出名称
		filename: 'library.js',
		// 支持script标签引入【在全局下增加变量】
		library: 'root',
		// 无论com 还是import都能适配【全局变量挂载在哪里】
		libraryTarget: 'umd'
	}
}

npm发布

{
  "name": "library-dell-lee-2019",
  "version": "1.0.0",
  "description": "",
  //改变入口地址即可发布
  "main": "./dist/library.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "Dell",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.11",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  }
}

PWA

缓存之前访问过的页面（即使网站挂掉了）

配置项：

	plugins: [
		new WorkboxPlugin.GenerateSW({
			clientsClaim: true,
			skipWaiting: true
		})
	],

另外在入口文件中加入：

if ('serviceWorker' in navigator) {
	window.addEventListener('load', () => {
		navigator.serviceWorker.register('/service-worker.js')
			.then(registration => {
				console.log('service-worker registed');
			}).catch(error => {
				console.log('service-worker register error');
			})
	})
}

TS打包配置

提高代码维护性

• 安装ts-loader
• 在根目录下创建ts配置文件tsconfig.json

{
	"compilerOpitons": {
		//位置
		"outDir": "./dist",
		//es module引入
		"module": "es6",
		//翻译成什么形式
		"target": "es5",
		//允许引入js模块
		"allowJs": true,
	}
}

可以安装提示模块以便提示

使用WebpackDevServer实现请求代理(开发过程中)

	devServer: {
		contentBase: './dist',
		open: true,
		port: 8080,
		hot: true,
		hotOnly: true,
		proxy: {
		//请求接口头
			'/react/api': {
			//代理目标地址
				target: 'https://www.sss-ddd.com',
				//https请求配置
				secure: false,
				pathRewrite: {
				//后面的内容也可以先请求别的
					'header.json': 'demo.json'
				},
				//突破origin限制（防爬虫）
				changeOrigin: true,
				//变更请求头
				headers: {
					host: 'www.sss-ddd.com',
				},
				//请求拦截
				bypass:function(){}
			}
		}
	},

实现单页面路由

devServer: {
		contentBase: './dist',
		open: true,
		port: 8080,
		hot: true,
		hotOnly: true,
		//实现单页面路由
		historyApiFallback: true,
		proxy: {
			'/react/api': {
				target: 'https://www.dell-lee.com',
				secure: false,
				pathRewrite: {
					'header.json': 'demo.json'
				},
				changeOrigin: true,
				headers: {
					host: 'www.dell-lee.com',
				}
			}
		}
	},

也可以以对象形式调用

EsLint在webpack中的配置

EsLint初始化：

EsLint检测

安装插件进行检测

可以通过复制之后配置为0即可取消该设置

module.exports = {
  //规范名称
	"extends": "airbnb",
  //解析器（解析react等）
  "parser": "babel-eslint",
  "rules": {
    //自行配置
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0
  },
  globals: {
    //全局变量不允许被覆盖
    document: false
  }
};

也可以在rules中新增规则

rules: [{ 
			test: /\\.js$/, 
			exclude: /node_modules/, 
			use: ['babel-loader', 'eslint-loader']
		},]

同时在devserver中配置： overlay: true,
自动修复：

提升webpack打包速度

1. 跟上技术的迭代（node、npm、yarn）
2. 在尽可能少的模块上使用loader(比如这种)
   
3. plugin尽可能要少（推荐使用官方插件）
4. resolve参数合理配置

	resolve: {
		//这里不要配置太多
		extensions: ['.js', '.jsx'],
		//引入child时默认引入当前目录之后走后面的路径
		alias: {
			child: path.resolve(__dirname, '../src/a/b/c/child')
		}
	},

5. 使用DLLPlugin提高打包速度
   第三方模块只分析一次

首先编写dill打包代码：

const path = require('path');
const webpack = require('webpack');

module.exports = {
	mode: 'production',
	entry: {
	//配置需要预打包的文件
		vendors: ['lodash'],
		react: ['react', 'react-dom'],
		jquery: ['jquery']
	},
	output: {
		filename: '[name].dll.js',
		path: path.resolve(__dirname, '../dll'),
		//这个是通过全局变量暴露出来
		library: '[name]'
	},
	plugins: [
	//生成manifest.json的映射文件
		new webpack.DllPlugin({
			name: '[name]',
			path: path.resolve(__dirname, '../dll/[name].manifest.json'),
		})
	]
}

然后通过AddAssethtmlWebpackPlugin引入变量

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

配置使用哪个文件来引入到index.html：

filepath: path.resolve(__dirname, '../dll', file)

 webpack.DllReferencePlugin

先去manifest中与第三方模块的映射关系直接去全局变量中拿
多文件打包时plugin的配置：

const plugins = [
	new HtmlWebpackPlugin({
		template: 'src/index.html'
	}), 
	new CleanWebpackPlugin(['dist'], {
		root: path.resolve(__dirname, '../')
	})
];
//获取dll后缀文件
const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
files.forEach(file => {
	if(/.*\\.dll.js/.test(file)) {
		plugins.push(new AddAssetHtmlWebpackPlugin({
			filepath: path.resolve(__dirname, '../dll', file)
		}))
	}
	if(/.*\\.manifest.json/.test(file)) {
		plugins.push(new webpack.DllReferencePlugin({
			manifest: path.resolve(__dirname, '../dll', file)
		}))
	}
})

6. 控制包文件大小
7. 使用 thread-loader、parallel-webpack、happypack多进程打包
8. 合理使用sourceMap：有些没必要生成
9. 结合stats分析打包时常
10. 开发环境内存编译，剔除无用插件
11. loader中的各种参数

多页面打包配置

入口文件新增入口：

	entry: {
		index: './src/index.js',
		list: './src/list.js',
		detail: './src/detail.js',
	},

动态生成多页面打包文件

const makePlugins = (configs) => {
	const plugins = [
		new CleanWebpackPlugin(['dist'], {
			root: path.resolve(__dirname, '../')
		})
	];
	Object.keys(configs.entry).forEach(item => {
		plugins.push(
			new HtmlWebpackPlugin({
				template: 'src/index.html',
				filename: `${item}.html`,
				//打包html需要引入的文件
				chunks: ['runtime', 'vendors', item]
			})
		)
	});
	const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
	files.forEach(file => {
		if(/.*\\.dll.js/.test(file)) {
			plugins.push(new AddAssetHtmlWebpackPlugin({
				filepath: path.resolve(__dirname, '../dll', file)
			}))
		}
		if(/.*\\.manifest.json/.test(file)) {
			plugins.push(new webpack.DllReferencePlugin({
				manifest: path.resolve(__dirname, '../dll', file)
			}))
		}
	});
	return plugins;
}