webpack学习笔记

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
#1.webpack知识点梳理

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

这篇文章介绍了webpack的基本使用方法，希望通过这一篇文章增强你对webpack的了解。

提示：以下是本篇文章正文内容，下面案例可供参考

一、webpack是什么？

webpack 是代码编译工具，有入口、出口、loader 和插件，是一个用于现代 JavaScript 应用程序的静态模块打包工具
主要功能：代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。

二、基本配置

1.入口文件配置

代码如下（示例）：

module.exports = {
	entry:'./src/main.js' // 多个入口文件可以使用数组的形式 例、['./src/main1.js', './src/main2.js']
}

2.出口文件配置

代码如下（示例）：

const path = require('path');
module.exports = {
	// 单个出口文件
	output: {
		filename: "build.js",
		path: path.resolve(__dirname,'dist'),
		clean: true // 5.20.0+版本支持配置项形式清除上一次打包生成的文件 低版本可以使用CleanWebpackPlugin插件实现
	}
	// 多个出口文件
	output: {
		filename: "[name].js",
		path: path.resolve(__dirname,'dist')
	}
}

3.module配置

当webpack遇到不能解析的模块时，webpack会找到module对象下面的rules，去匹配对应的规则。如果有对应的loader匹配时，我们就使用对应的规则解析。

const path = require('path');
const getStyleLoader = (loaderName) => {
  return [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: ['postcss-preset-env']
        }
      }
    },
    loaderName
  ].filter(Boolean)
}
module.exports = {
	entry: './src/mian.js',
	output:{
		filename: 'build.js',
		path: path.resolve(__dirname,'dist');
	},
	module:{
		// 处理css
      {
        test: / \.css$/,
        use: getStyleLoader()
      },
      {
        test: / \.less$/,
        use: getStyleLoader('less-loader')
      },
      {
        test: / \.s[ac]ss$/,
        use: getStyleLoader('sass-loader')
      },
      {
        test: / \.styl$/,
        use: getStyleLoader('stylus-loader')
      },
      // 处理图片
      {
        test: / \.(jep?g|png|gif|webp|svg)$/,
        type: 'asset',
        parser : {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        }
      },
      // 处理其他资源
      {
        test: / \.(woff2?|ttf)$/,
        type: 'asset/resource'
      },
	}
}

4.自定义loader

代码如下（示例）：

const path = require('path');
module.exports = {
	entry: './src/mian.js',
	output: {
		filename: 'build.js',
		path: path.resolve(__dirname,'dist');
	},
	//配置loader解析路径
	resolveLoader:{
		//在根目录下面新建loaders目录
		modules:['node_modules', path.resolve(__dirname, 'loaders')];
	}
	module:{
		rules: [
			//使用doc-loader,用来解析doc文件内容
			{
				test:'/\.js$/',
				use:'auth-loader'
			}
		]
	}
}

// loaders/auth-loader/index.js
/*
  1.loader是一个函数
  2.当webpack调用对应的资源时 会调用相应的loader去处理
  3. content: 对应资源文件内容; map：文件的SourceMap; meta: 其他loader传过来的数据
*/
module.exports = (content, map, meta)=>{
	return content + `@auth: 1米25`;
}

5.插件配置

5.1 CleanWebpackPlugin插件

5.1 该插件是webpack4版本用来清除打包的文件的

const path = require('path');
const {CleanWebpackPlugin}  = require('clean-webpack-plugin')
module.exports = {
	mode: 'production',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname,'dist'),
		filename: 'index.js'
	},
	//注册插件
	//webpack 会自动调用apply方法，把插件注册到webpack中
	plugins:[
		new CleanWebpackPlugin();
	]
}

5.2 HTMLWebpackPlugin插件

这个插件主要是用来解决，原来的index文件的引用问题，当我们上面修改了打包文件的名称，那我们还得手动修改index.html文件引用的打包文件的名称，比较麻烦；同时这个引用是相对路径，并且这个文件不能和打包文件放在一起，否则会被上面这个插件清理掉。所以使用这个插件来自动生成一个index.html文件

const path = require('path');
module.exports = {
	mode: 'production',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname,'dist'),
		filename: 'index.js',
		clean:true
	},
	plugins:[
		new HTMLWebpackPlugin({
			//自动生成一个index.html 文件到打包目录中，并且自动引入打包文件。
			filename:'index.html',
			//防止根目录下的index.html文件的元素或者属性丢失，跟自动生产的index做合并处理。
			template:'./index.html',
			//设置浏览器显示的title名称,然后在根目录下的index文件中使用，如下图所示。
			title: 'webpack demo'
		});
	]
}

5.3 MiniCssExtractPlugin 插件

这个插件是用来处理当我们使用css-loader 时候，我们样式会展示在html中的header中的style里面这样不方便我们以后进行优化，这个插件可以把相应的css生成一个单独的css文件中,放在打包的目录中。

const path = require('path');
module.exports = {
	mode: 'production',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname,'dist'),
		filename: 'index.js',
		clean: true
	},
	module:{
		rules: [
			{
				test:/\.css$/,
				//同一类loader中执行顺序，先下后上，先右后左。先执行css-loader->style-loader
				use: [
					//替换style-loader 为插件内置的loader
					{
						loader:MiniCssExtractPlugin.loader
					},
					'css-loader'
				]
			}
		]
	},
	plugins:[
		new MiniCssExtractPlugin({
			//这个插件内置一个loader，需要我们替换掉style-loader
			filename:'[name].css'
		})
	]
}

总结

提示：这里对文章进行总结：

还在继续学习中 后续的配置在这篇文章中更新