webpack的基本使用

Wenn 于 2022-10-16 发布

webpack.config.js

const path = require('path')

module.exports = {
	//模式
	mode: 'production',
	//入口文件,绝对路径
	entry: './src/main.js',
	//出口文件
	output: {
		//出口文件名
		filename: 'bundle.js',
		//出口文件路径，相对路径
		path: path.resolve(__dirname, 'build'),
	},
	module: {
		rules: [
			{
				//test 使用正则表达式匹配，.需要转义，所以前加\,之后需要css文件结尾，所以$,最后i表示不区分大小写
				test: /\.css$/i,
				use: [
					//> loader加载顺序为先下后上，先右后左，从后往前
					//todo 以下语法是该语法的简写，等同于该语法{ loader: 'css-loader' },

					'style-loader',
					//原理 document.createElement('style')  document.head.appendChild(style)

					'css-loader', //只负责解析css，不会将style插入html
					'postcss-loader',
				],
				//loader:'css-loader'  也是上面语法的简写，如果只有一个loader时，可以如此
			},
			{
				test: /\.less$/i,
				//less主要生成css文件
				use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader'],
			},
		],
	},
}

browserslist

Can I use 网站统计 依赖 caniuse-lite

  1. 也可以在 package.json 文件中写入browserslist:[">1%","last 2 version", "not dead"]

  2. 在之中，如果使用,分割，则只需要满足其中一个条件，但是如果使用 and，则为所有条件都满足 如

  3. 如果没有配置，则会使用默认配置browserslist.default = ['>1%','last 2 versions', 'not dead'

  4. rc 文件是 runtimecompiler 的缩写，指运行时编译

PostCSS

css 的转换和适配

  1. 添加 postcss-loader
  2. 添加对应的插件

比如添加对应的前缀，命令行使用autoprefixer

  1. yarn add autoprefixer
  2. yarn postcss-cli 主要用作在命令命令行执行 postcss 命令
  3. yarn postcss –use autoprefixer result.css ./src/css/xx.css
					{
						loader: 'postcss-loader',  //多个参数固定语法
						options: {  //固定语法
							postcssOptions: {
								plugins: [require('autoprefixer')],
                                //也可以直接写字符串，类似于上述语法
							},
						},
					},

在 webpack.config.js 中配置 postcss 及其插件 autoprefixer

postcss-preset-env

转换更现代的 css

也可以在postcss.config.js文件中写入配置，这样在webpack.config.js文件中只需要写入‘postcss-loader’即可–抽离

module.exports = {
	plugins: [require('postcss-preset-env')],
}

如果单独抽离出来 css 文件，导入其他 css 文件，那被抽离的则不会被postcss处理

此时postcss-loader在检测 css 文件时并没有发现要被处理的 css 文件，则直接移交给css-loader进行处理，那再处理 css 文件时，并不会折返回去让postcss在进行处理，那就会直接是 css 源文件

					{
						loader: 'css-loader',
						options: {
							importLoaders: 1, //在css-loader处理css文件之前需要有几个loader进行处理则填几
						},
					},

如果需要进行多个文件处理，则需要将 optins 的值进行相应的替换

加载和处理其他资源

1.file-loader 简单复制到打包文件，并且引用

也可以使用这样的方式，就不用进行 require(‘./xxx.img’).default

import xxxImage from './img/xxx.png'

imgEl.src= xxxImage

使用 file-loader 进行导出文件时指定文件路径、文件名称格式等

也可以使用下面的输出路径，与上述等同，在开发中使用频率更高一些

其中 hash:6 为防止文件重复，表示截取 6 位哈希值，与[.ext]表示保留文件扩展名

  1. url-loader 对大小小于 8kb 的图片转换为 base64 的编码进行直接处理嵌入

也可以进行自主设置，使超过对应大小的文件进行展示源文件，否则进行 base 转码嵌入

asset module type webpack5

如此也可，更为方便，不会将所有导出的文件都放在固定一个文件夹中

  1. asset/resource 实现 file-loader 的效果

  2. asset/inline直接打包到文件的代码中，实现 url-loader 的效果

  3. asset实现不超过 100kb 都为 base 编码

加载字体