研究一下webpack5

基本搭建:不再赘述 必要的包如下

// css独立打包  npm install -D mini-css-extract-plugin
// css压缩 npm install -D css-minimizer-webpack-plugin
// css前缀处理 npm install -D postcss-loader autoprefixer
use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader']

optimization: {
minimizer: [ new CssMinimizerWebpackPlugin() ]
},
npm install -D babel-loader @babel/core @babel/preset-env
npm install -D @babel/polyfill
import '@babel/polyfill'

// 只转译用到的新语法 core-js

npm install core-js -D
useBuiltIns: 'usage'
corejs: 3 // 目前新版本是3
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3,
targets: "defaults"
}]
],
}
}
JS代码格式校验Eslint系列

npm i eslint eslint-config-airbnb-base eslint-webpack-plugin eslint-plugin-import -D
eslint规范、webpack的eslint插件、加载eslint配置
"eslintConfig": {
"extends": "airbnb-base"
}

// eslint-disable-next-line
// 清理dist
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
npm i file-loader -D
npm i url-loader -D // 比前者更高级一些
{
	test: /\.(png|gif|jpe?g)$/i,
	use: {
		loader: 'file-loader'
	}
}
{
test: /.less$/i,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},'css-loader','postcss-loader','less-loader']
}
{ test: /\.(png|jpe?g|gif|svg|bmp)(\?.*)?$/, loader: 'url-loader', options: { limit: 5000, name: './images/[name].[hash:8].[ext]', } },
npm install -D html-loader
url-loader使用的是ES module规范,而html-loader使用的是common-js规范,需要关闭url-loader的ES module规范
都要在options里面手动esModule: false
{
test: /.(png|gif|jpe?g)/i,
use: [{
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: "image/[name].[ext]",
esModule: false
}
}],
type: 'javascript/auto' // 关键
}
把index.html改成index.ejs  用ejs语法引用图片
坑:  在引入css中的background:url(xxx.jpg)的时候, url-loader会产生两个哈希图片,其中一个是打不开的,而偏偏引用的就是这个打不开的。

看了网友的解决方案,需要加上type: 'javascript/auto' // 旧的loader会让资源重复

因为webpack5内置了资源模块
Asset Modules
不推荐再搞一堆loader了,

1、asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
2、asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
3、asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
{
	test: /\.(png|gif|jpe?g)/i,
	type: 'asset',
	parser: {
	        dataUrlCondition: {
		maxSize: 8 * 1024,
		},
	},
	generator: {
		filename: "images/[name][ext]"
	}
}

webpack-dev-server

npm i -D webpack-dev-server
启动webpack devServer 命令: webpack serve
devServer: {
	contentBase: path.resolve(__dirname, 'dist'),
	// 启用 gzip压缩
	compress: true,
	// 端口号
	port: 8080,
	// 启动自动更新(禁用hot)
	liveReload: true,
	proxy: {
		// http://localhost:8080/api
		'/api': {
			// http://localhost:8080/api/users => https://api.github.com/api/users
			target: 'https://api.github.com',
			// http://localhost:8080/api/users => https://api.github.com/users
			pathRewrite: {
				'^/api': ""
			},
			// 不能使用localhost:8080作为github主机名
			changeOrigin: true
		}
	}
},
target: "web", // 热更新只适用web相关targets