【Webapck学习】
1、webpack是什么
Webpack是一个前端模块化方案，更侧重于模块打包。我们可以把开发中的所有资源(图片，js,css,字体等)
都看成模块，通过loader和plugins对资源进行处理，打包成符合生产环境部署的前端资源
- 初始化项目，得到package.json文件
npm init -y - 安装webpack, webpack-cli
npm install webpack webpack-cli - 使用webspack打包
npx webpack - 查看打包细节
npx webpack --stats detailed - 查看webpack终端命令有哪些
npx webpack --help - 命令行不方便，通过配置文件来配置 webpack.config.js，执行npx webpack就可以
const path = require('path')
module.exports = {
entry: './src/index.js', //打包入口
output: {
filename: 'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, './dist'),// 输出文件夹必须定义为绝对路径
clean: true, // 打包前清理dist文件夹
},
mode: 'none'
}
2、插件|Plugins
插件是webpack的核心功能。可以用于执行一些特定的任务，包括：打包优化，资源管理，注入环境变量等。
webpack自身也是构建于你在webpack配置中用到的相同的插件协同。可以完成Loader无法完成的其它任务。
01、使用HtmlWebpackPlugin
- 作用： 一个服务于bundles的、用于简化HTML文件生成的插件
- 安装：
yarn add --dev html-webpck-plugin - 配置：
plugins: [
new htmlWebpackPlugin({
filename: 'app.html', // 生成的文件名
template: path.resolve(__dirname, './index.html'), // 源文件的绝对路径
inject: 'body' // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false，默认值为 true
})
]
3、搭建开发环境
- 设置mode：
mode: 'development', // 开发模式 - 使用sourcemap：
devtool: 'inline-source-map', // 开发模式下追踪代码，生成的sourcemap文件，会内嵌在bundle.js中当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代
码中的原始位置。例如，如果将三个源文件（ a.js , b.js 和 c.js ）打包到一个
bundle（ bundle.js ）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直
接指向到 bundle.js 。你可能需要准确地知道错误来自于哪个源文件，所以这种提
示这通常不会提供太多帮助。
为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以
将编译后的代码映射回原始源代码。如果一个错误来自于 b.js ，source map 就会
明确的告诉你。 - 使用watch mode(观察者模式)：
npx webpack --watch在 webpack 启动时添加 “watch” 参数。如果其中一个文件被更新，代码将
被重新编译，所以你不必再去手动运行整个构建 - 使用webapck-dev-server：
-
- 安装：
npm install webpack-dev-server -D
- 安装：
-
- 配置：
devServer: { static: './dist' }以上配置告知 webpack-dev-server ，将 dist 目录下的文件作为 web 服务的根目
录。
- 配置：
-
- 运行：
npx webpack server --openwebpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文
件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server
根路径上的真实文件一样。
- 运行：
4、loader
1、loader是什么？
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用loader进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。
在Webpack中，Loader是一种用于转换不同类型文件的中间件。它们的主要任务是将源文件转换为模块，以便将它们添加到Webpack的依赖图中。
Loader将源文件作为输入，对其进行处理，然后输出转换后的文件。这些处理可以包括编译、压缩、转译、转换和其他自定义操作。最终，这些文件将被合并到Webpack的输出中。
2、安装loader
npm install babel-loader style-loader css-loader file-loader --save-dev
3、配置loader
loader有两个属性
- test 属性，识别出哪些文件会被转换。
- use 属性，定义出在进行转换时，应该使用哪个 loader。
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
],
},
]
}
loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。
4、loader特性
- loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
- loader 可以是同步的，也可以是异步的。
- loader 运行在 Node.js 中，并且能够执行任何操作。
- loader 可以通过 options 对象配置（仍然支持使用 query 参数来设置选项，但是这种方式已被废弃）。
- 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
- 插件(plugin)可以为loader带来更多特性。
- loader 能够产生额外的任意文件。
可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转译（或编译）和 更多其他特性。
5、webpack.config.js文件
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),// 输出文件夹必须定义为绝对路径
clean: true, // 打包前清理dist文件夹
},
plugins: [
new htmlWebpackPlugin({
filename: 'app.html', // 生成的文件名
template: path.resolve(__dirname, './index.html'), // 源文件的绝对路径
inject: 'body' // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false，默认值为 true
})
],
mode: 'development', // 开发模式,
devtool: 'inline-source-map', // 开发模式下追踪代码，生成的sourcemap文件，会内嵌在bundle.js中
devServer: {
static: './dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.less$/,
use: [
'style-loader', 'css-loader','less-loader'
]
},
{
test: /\.(png|jpg|gif)$/, // 把图片处理为url的数据
// 如果loader只有一个，只传递一个字符串即可
use : 'url-loader?limit=4734'
}
],
}
}
6、package.json文件
{
"name": "01_html_js",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx webpack",
"detail": "npx webpack --stats detailed",
"dev": "npx webpack server --open"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
},
"devDependencies": {
"css-loader": "^6.8.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.6.0",
"less-loader": "^11.1.3",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"url-loader": "^4.1.1",
"webpack-dev-server": "^4.15.1"
}
}