初学WebPack

0 什么是Webpack?

WebPack 顾名思义, 网页打包,   将相关资源进行整合,方便发布,常见于各种前端框架中

官网中的解释是

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

博客写于2021年,现在webpack的版本号是5.370

webpack 主要分为 entry ,ouput, loader,plugins 等一些进价的配置节点

官网中首页的图非常的形象描述了webpack, 帮你把各种资源 按照一定的配置转换成浏览器需要的格式

1 webpack 开始

环境要求

运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)。

安装方法

npm install webpack webpack-cli --save-dev

从 webpack4 开始起,默认安装后,是没有配置文件的.需要自己手动新建 文件,文件名称默认为 webpack.config.json,还可以在打包的时候加上 npx webpack --config webpack.config.js 文件名(这样就可以使用不同的配置文件)进行打包, 也可以修改 package.json 里面的build 命令,用npm run build 进行打包

值得注意的是  配置文件中是使用的CommonJS规范

2 webpack常用配置点

下面将一下配置文件中的几个常用节点

entry  入口

进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

入口分为单入口(是一种简写方式) 和 多入口(完整的写法)

//单入口(简写)写法 语法为:entry: string | [string]
//示例1
module.exports = {
  entry: './path/to/my/entry/file.js',
};

//上面也是这种多入口语法的一种简写
module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

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

//对象语法(比较完整的写法)
entry: { <entryChunkName> string | [string] } | {}

//示例1
module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};
//对象中还有以下的扩展属性
//dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
//filename: 指定要输出的文件名称。
//import: 启动时需加载的模块。
//library: 指定 library 选项，为当前 entry 构建一个 library。
//runtime: 运行时 chunk 的名字。如果设置了，就会创建一个以这个名字命名的运行时 chunk，否则将使
//用现有的入口作为运行时。
//publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 //output.publicPath。
//示例2
module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      filename:'test',
      import: './src/app.js',
    },
  },
};

output 输出

可以通过配置 output 选项，告知 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个 entry 起点，但只能指定一个 output 配置。

//示例一
module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

//实例二
module.exports = {
 output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};


//output.filename - 用于 initial chunk 文件
//output.chunkFilename - 用于 non-initial chunk 文件
//在某些情况下，使用 initial 和 non-initial 的 chunk 时，可以使用 output.filename。
//这些字段中会有一些 占位符。常用的占位符如下：
//[id] - chunk id（例如 [id].js -> 485.js）
//[name] - chunk name（例如 [name].js -> app.js）。如果 chunk 没有名称，则会使用其 id 作为名称
//[contenthash] - 输出文件内容的 md4-hash（例如 [contenthash].js -> 4ea6ff1de66c537eb9b2.js）

还有一些其他属性,可以查看官网的配置

https://webpack.docschina.org/configuration/output/

loader

这个单词,在官网中没看到有翻译,百度翻译中 是 n.装货的人，装货设备，装弹机; 装板机;

个人感觉好像是 加载转换器 ,根据不同的规则去加载不同的文件,然后去做一些处理

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

在使用loader之前,需要先安装一下loader

例如 

npm install --save-dev css-loader 

//示例一:
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};
//整个节点说明.
module: { //【对象】如何处理模块，通过一堆loader
            noParse：不解析的部分。 // 如/moment(?!-)|node_modules\/chart\.js/, （忽略对部分没采用模块化的文件的递归解析和处理，这样做的好处是能提高构建性能）

        rules: [ //【对象数组】
            {
                // ****条件匹配****
                test: 正则匹配文件名或正则数组。 例如 [ /\.jsx?$/,/\.tsx?$/],

                include: 包含哪些文件（路径）或路径数组
                 例如 [
                                       path.resolve(__dirname, 'src'),
                                       path.resolve(__dirname, 'tests'
                                 ],

                exclude: 排除哪些文件
                 例如 path.resolve(__dirname, 'node_modules') ，因为node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换。）

                // **** 应用规则（里面的每一项就是一个loader）****
                use: [ //【字符串数组(则由后往前执行) | 对象数组】
                            {
                                    loader: ‘babel-loader’,

                                    options:{
                                      cacheDirectory:true,
                                   },

                                   enforce: 调节这个loader的执行顺序。
                                    例如'post'把该 Loader 的执行顺序放最后
                            }
                 ]
            }
                  ]
    }

loader 除了上文说的配置方式, 还有内联方式,官网不太推荐,这里也不展开,有兴趣的可以去看看,下面是地址

https://webpack.docschina.org/concepts/loaders/#inline

值得注意的是

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute) ,跟平常的不一样

loader现在目前有 处理 css less ts  es6转es5等 的loader 

有空的话,我会整理一下常用的loader.

plugins 插件

插件是 webpack 的 支柱 功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在 整个 编译生命周期都可以访问 compiler 对象。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
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一个对象
    //用于自定义编译过程中的进度报告
    new webpack.ProgressPlugin(),
    //HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名
    //中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 
    //HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

 

当然还有些进价的写法,还有待去摸索,这只是个入门

持续更新中..