《深入浅出Webpack》阅读笔记（二）

最新推荐文章于 2024-09-29 08:00:00 发布

chaochao_o

最新推荐文章于 2024-09-29 08:00:00 发布

阅读量141

点赞数

分类专栏： webpack 文章标签： webpack 前端

本文链接：https://blog.csdn.net/lichao000124/article/details/99290198

版权

webpack 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

《深入浅出Webpack》阅读笔记（二）

二、 webpack常用配置概览

二、 webpack常用配置概览

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)，在处理应用程序时会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle.js。
从webpack v4.0.0开始，可以不用引入配置文件，本文主要介绍webpack的几个核心概念。

Entry：入口，构建的开始
Module：模块，webpack中一个模块对应一个文件，webpack从配置的入口文件中递归查找所有依赖的模块。
Chunk：代码块，由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，将模块的原内容按照需求转换成新内容。
Plugin：扩展插件，在构建过程中的特定时机注入扩展逻辑，改变构建结果或者加入我们想要的事情。
Output：输出结果。

整体认知： webpack具体的处理流程为：webpack启动后从Entry文件中配置的Module开始，递归解析入口文件依赖的所有Module，每找到一个就会根据配置的loader去找对应的转换规则，对module进行转换后，再解析当前Module依赖的Module，这些模块会以Entry为单位分组，一个入口文件及其所有依赖的模块为一组即为一个chunk，最后将所有的chunk转换成文件输出，webpack会在恰当的时机执行plugin中的逻辑。

下面对各项内容详细介绍。

1、Entry入口

指示webpack使用哪个文件作为构建内部依赖图的入口，可以在webpack配置entry属性指定一个入口起点或多个入口起点。

module.exports = {
	entry: './src/main.js'
}

2、output出口

告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件

const path = require('path');
module.exports = {
    entry: './src/main.js',
    output :{
        filename : 'bundle.js',
        path:path.resolve(__dirname,'./dist'),
    }
};

3、loader

loader让webpack能够处理非JavaScript文件（webpack只理解JavaScript），然后转换成webpack能够处理的模块，随后即可使用webpack进行构建打包处理。

在webpack配置中loader有两个目标：
（1）use属性的值需要一个由loader名称组成的数组，loader的执行顺序是由后向前的，表示进行转换时，应该使用哪个loader。
（2）test属性用于标识应该被对应的loader进行转换的某个或某些文件。

modules:{
	rules:[
		{
			test: /\.css$/,
			use: ['style-loader', 'css-loader?minimize'],
		}
	]
}

modules:{
	rules:[
		{
			test: /\.css$/,
			use: [
					'style-loader',
					{
						loader:'css-loader',
						options:{
							minimize:true,
						}
					}
				]}
	]}

上述配置中的modules.rules数组配置了一组规则，告诉webpack在遇到哪些文件时使用哪些loader去加载和转换。
有三种使用loader的方法：

配置：在webpack.config.js文件中指定loader；使用方式如上。

内联：在每个import语句中显示指定loader；

import Style from 'style-loader!css-loader?modules!./styles.css';

CLI：在shell命令中指定。

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

4、plugins插件

loader用于转换某些类型的模块，plugin可以执行范围更广的任务，扩展了webpack的功能
使用一个插件，只需要require()，然后将其添加到plugin数组中，多数插件可以通过选项（option）自定义，也可以在一个配置文件中因为不同目的多次使用同一个插件，需要使用new操作符来创建它的一个实例。

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};