webpack学习

webpack学习

简述

webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将我们整个项目的文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，可以运行在浏览器中。一般的我们将webpack输出的文件叫做bundle

为什么需要打包工具

随着现在前端技术的发展，我们会使用各种框架（Vue、React），ES6模块化语法、Less/Sass等css预处理器，去提高新开发的效率和程序的健壮性。但是对于这些语法和框架我们的浏览器是不能直接运行的，需要使用一些打包工具去将代码进行编译，将其编译成浏览器可以运行的js、css等语法，才能运行。

此外，使用一些打包工具还可以压缩代码、做一些兼容性处理、提升代码的性能等。

常用打包工具

• Gulp
• Webpack
• Vite
• …

功能

webpack有两种开发模式，这两种开发模式的功能是有限的：

• 开发模式：只能编译js中的ES Module模块语法
• 生产模式：能编译js的ES Module模块语法和压缩js代码。所以要使用webpack去实现打包其他资源我们就需借助一些工具来实现。

Webpack五大核心模块

• entry：入口
  指明了需要打包文件的入口，让webpack知道从按个文件开始打包
• output： 输出
  指明了打包的文件要输出到哪里去，并且如何命名等
• laoder：加载器
  由于webpack本身的功能很少，只能解析js、json等资源，所以在处于其他资源的时候就需要借助loader，webpack才能解析
• plugins：插件
  就好比浏览器的插件一样，可以扩展webpack的功能，我们需要下载并且引用它
• mode：模式
  生产模式：production
开发模式：deveplopment

以上内容来自：

Webpack基础篇(-)–入门

详细讲解

一、入口 entry

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

webpack.config.js

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

也可以简写为：

module.exports = {
  entry: './path/to/my/entry/file.js',
};

在你想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 “chunk” 中时，我们就可以将一个文件路径数组传递给 entry 属性

webpack.config.js

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

二、输出output

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在./dist文件夹中。

webpack.config.js

const path = require('path')

module.exports = {
	entry: './path/to/my/entry/file.js',
	output: {
		path: path.resolve(__dirname,'dist),
		filename: 'my-first-webpack.bundle.js'
	}
}

上面示例，分别通过output.path和output.filename属性来设置文件输出位置以及输出文件的名称。

三、loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中，loader 有两个属性：

• test 属性，识别出哪些文件会被转换。
• use属性，定义出在进行转换时，应该使用哪个loader

注：loader是在module下的rules属性下进行配置

webpack.confis.js

const path = require('path')

module.exports = {
	entry: '',
	output: {
		path: '',
		filename: ''
	},
	module: {
		rules: [{
			test: '/\.txt$/',
			use: 'raw-loader'
		}],
	},
}

以上配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。这告诉webpack编译器，当遇到require或者import语句中被解析为 '.txt'的路径时，在对它进行打包前，先use（使用）raw-loader转换一下。

示例一

使用loader告诉webpack加载css文件，或者将TypeScript转为JavaScript。为此首先安装相对应的loader。

npm install --save-dev css-loader ts-loader

然后指示webpack对每个.css使用css-loader，以及对所有的.ts文件使用ts-loader

webpack.config.js

module.exports = {
	module: {
		relus: [
			{test: /\.css$/,use: 'css-loader'},
			{test: /\.ts$/,use: 'ts-loader'},
		]
	}
}

示例二

module.rules允许你在webpack配置中指定多个loader。loader从左到右（或从下到上）的取值执行。在下面示例中，从sass-loader开始执行，将scss/sass文件编译成普通的css文件，然后继续执行css-loader，css-loader会对css文件进行解析处理，最后执行style-loader，style-loader会将css样式嵌入到html中。

module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					{loader: 'style-loader'},
					{
						loader: 'css-loader',
						option: {
							modules: true // modules: true选项意味着它会将CSS类名转换为唯一的哈希值，这样可以避免在项目中的CSS样式冲突。
						}
					},
					{
						loader: 'sass-loader'
					}
				]
			}
		]
	}
}

四、插件plugin

loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。想要使用一个插件，只需要require()它，然后把它添加到plugin数组中，多数插件可以通过选项（option）自定义。你也可以在一个配置文件中因为不同目的的而多次使用同一个插件，这时要通过new操作符来创建一个插件实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例。

ProgressPlugin 用于自定义编译过程中的进度报告，HtmlWebpackPlugin 将生成一个 HTML 文件，并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。

五、模式mode

通过选择development，production或none之中的一个，来设置mode参数，你可以启用webpack内置在相应环境下的优化，其默认值为production

module.exports = {
	mode: 'production'
}