webpack笔记

前言

在学习webpack过程当中整理的一系列笔记，如有不对的地方请各位老哥指导。

webpack是什么

​ 官方解释： 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

​ 简单webpack主要是用于打包前端代码的，它可以将JavaScript、CSS、图片等资源打包成一个或多个文件，用于浏览器端的加载。而Express框架是一个Node.js的后端框架，用于搭建Web应用程序。因此，webpack并不适用于打包Express框架本身，但是你可以使用webpack打包你的前端代码，并将打包后的文件引入到Express框架中。这样可以将前端代码和后端代码分离，便于管理和维护。

webpack的下载和基本使用

安装webpack

局部安装
npm install webpack webpack-cli --save
全局安装
npm install webpack webpack-cli -g

如果要运行 局部安装的可以使用 npx webpack来运行 全局安装可以直接调用webpack命令

查看版本号

局部 npx webpack -v
全局 webpack -v

设置打包

在项目目录创建webpack.config.js

var path=require("path")

moudule.exports={
    //入口
    entry:path.resolve(_dirname,"项目入口文件"),
    //多入口
    entry:['./src/js/index.js','./js/one.js'],
    entry:{
        ind:'./src/js/index.js',
        on:'./js/one.js'
    },
    //输出设置
    output:{
        path:path.reslove(__dirname,'dist'),//输出的路径
        filename:'bundle.js',//输出文件的名字
    }
    //多出口
    output: {
       filename: 'js/webpack02.[name].js',
       path: path.resolve(__dirname, 'dist')
    },
}

配置文件 (可跳过)

找到 package.json文件, 如果没有可以使用npm init进行初始化
添加下面一段话

  "scripts": {
    "build": "npx webpack"
  },

意思是 添加一个脚本 可以通过 npm run build命令来执行 npx webpack

配置插件

配置 html-webpack-plugin

• 安装依赖库
  npm install html-webpack-plugin --save-dev
• 配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入 html-webpack-plugin
module.exports = {
	mode: "development",
		entry: "./src/index.js",
		output: {
			path: __dirname + "/dist",
			filename: "dist.js"
	},
    plugins: [
        new HtmlWebpackPlugin(
            {
				title:"test html" // 设置更改默认标题名字
                template: "./src/index.html" // 把打包的模板设置成自己页面
            }
        )
    ],
}

配置 css less sass 等文件

• 安装依赖库
  npm install style-loader css-loader less-lader --save-dev
• 配置webpack.config.js

module.exports = {
   	mode: "development",
		entry: "./src/index.js",
		output: {
			path: __dirname + "/dist",
			filename: "dist.js"
	},
    module: {
        rules: [{
            test: /\.(less|css)$/i,
            use: [
                "style-loader",// 注意 style-loader必须写前面 不然会报错
                "css-loader",
                "less-loader",
            ]
        }
        ]
    }

}

配置clean-webpack-plugin

使用clean-webpack-plugin 在打包之前做清空dist(打包生成的路径文件夹)的操作

• 安装依赖库
  npm install clean-webpack-plugin --save-dev
• 配置webpack.config.js

    const {CleanWebpackPlugin}=require("clean-webpack-plugin")
    module.exports={
        ···
        plugins:[
        // 在打包之前做清空dist的操作
        new CleanWebpackPlugin(),
        ]
    }

配置资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

module.exports = {
    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/i, // 图片后缀名
            type: "asset/resource"
        }]
    }
}

官方文档

核心概念

webpack有 5 个核心概念：entry、output、mode、loaders、plugins。

entry

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

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

webpack.config.js

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

output

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

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

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.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。

loader

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

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

• test 属性，识别出哪些文件会被转换。

• use 属性，定义出在进行转换时，应该使用哪个 loader。

const path = require('path');
  
module.exports = {
	output: {
		filename: 'my-first-webpack.bundle.js',
},
module: {
	rules: [{ test: /\.txt$/, use: 'raw-loader' }],
	},
};

plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

查看 插件接口(plugin interface)，学习如何使用它来扩展 webpack 能力。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

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

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

mode

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

module.exports = {
  mode: 'production',
};

想要了解更多，请查阅 mode 配置，这里有具体每个值相应的优化行为。

参考文档

https://webpack.docschina.org/concepts/