webpack 基础记录

王同学啊啊啊
129 阅读5分钟

1.入口(entry)

多个入口点

    const config = {
        entry: {
            app: "./src/app.js",
            vender: './src/vender.js'
        }
    }
    module.exports = config;

使用 CommonsChunkPlugin 为每个页面的应用程序共享代码创建 bundle (包，捆绑)

::: 每个 HTML 只是用一个入口起点。

2.输出(output)

即使可以存在多个 入口 起点，但只指定一个 输出 配置

用法

在webpack中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以前两点：

  1. filename 用于输出文件的文件名
  2. 目标出目录 path 的绝对路径
    const config = {
        output: {
        filename: 'bundle.js',
        path: '/home/prok/publick/assets'
        }
    }
    module.exports = config;

多个入口起点

如果配置创建了多个单独的 "chunk" (例如多个入口起点或使用像 CommonsChunkPlugin 这样的插件)， 则应该使用 占位符 来确保每个文件具有唯一的名称

    entry:{
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',
        path: _dirname + '/dist'
    }
    // 写入到硬盘： ./dist/app.js, ./dist/search.js

高级进阶

一下是使用 CDN 和资源 hash 的复杂示例：

config.js

output: {
    path: "/home/proj/cdn/assets/[hash]"
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

在编辑时，不知道最终输出的文件的 publicPath 的情况下， publicPath 可以留空，并且在入口起点文件运行时动态设置，如果你在编译时不知道 publicPath, 你可以先忽略它， 并且在入口起点设置 webpack_public_path_。

 _webpack_public_path_ = muRuntimePublicPath

模式[mode]

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

type: String

用法

只在配置中提供 mode 选项：

module.exports = {
    mode: 'production'
}

或者从 CLI 参数中传递

CLI 时值，从命令行中传递参数

webpack --mode=production

支持 development 和 production 字符串

loader

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

示例

例如，你可以使用 loader 告诉 webpack 加载CSS 文件，或者将 TypeScript 转为 JavaScript。 为此, 首先安装相应的 loader:

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

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

webpack
module.export = {
    module: {
        rules: [
        {test: /\.css$/, use: 'css-loader'},
        {test:/\.ts$/,use: 'ts-loader'}
        ]
    }
}

使用 loader

在你的应用程序中，有三种使用 loader 的方式：

  1. 配置（推荐）： 在 webpack.config.js 文件中指定 loader。
  2. 内联： 在每个 import 语句中显示指定 loader。
  3. CLI: 在 shell 命令中指定它们。

配置[configuration]

module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式， 并且有助于使代码变得简洁。 同时让你对各个 loader 有个全局概览：

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

内联

可以在 import 语句或任何等效于"import"的方式中指定 loader。 使用 ！将资源中的 loader 分开。 分开的每个部分都相对于当前目录解析。

import Styles form "style-loader!css-loader?modules!./styles.css"

通过前置所有规则及使用!,可以对应覆盖到配置中的任意loader

选线可以传递查询参数，例如 ?key=value&foo=bar, 或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

CLI

你也可以通过CLI使用loader:

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

这会对 .jade 文件使用 jade-loader, 对 .css 文件使用 style-loader 和 css-loader

loader 特性

  1. loader 支持链式传递。 能够对资源使用流水线(pipeline)。 一组链式的 loader 将按照相反的顺序执行。 loader 链中的第一个 loader 返回值给下一个 loader。 在最后一个 loader, 返回 webpack 所预期的 javaScript.
  2. loader 可以是同步的， 也可以是异步的。
  3. loader 运行在 Node.js 中， 并且能够执行任何 可能的操作。
  4. loader 接受查询参数， 用于对 loader 传递配置
  5. loader 也能够使用 options 对象进行配置。
  6. 除了使用 package.json 常见的 main 属性， 还可以将普通的 npm 模块导出为 loader, 做法是在 package.json 里定义一个 loader 字段。
  7. 插件（plugin） 可以为loader带来更多特性。
  8. loader 能够产生额外的任意文件。

loader 通过（loader）预处理函数，为 javaScript 生态系统提供了更多的能力。 用户现在可以更加灵活地引入细粒度逻辑，例如压缩、打包、语音翻译和其他更多

解析loader

loader 遵循标准的模块解析。多数情况下， loader 将从模块路径（通常将模块路径让位是 npm install, node_modules）解析。

loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写，通常使用 npm 进行管理，但是也可以将自定义 loader 作为应用程序中的文件。 按照约定， loader 通常被命名为 xxx-loader(例如 json-loader)。 有关详细信息， 请查看如何编写loader

插件[plugins]

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

刨析

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

ConsoleLogOnBuildWebpackPlugin.js
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 构建过程开始！");
        })
    }
}

compiler hook 的 tap 方法的第一个参数， 应该是驼峰式命名的插件名称。 建议为此使用一个常量， 以便它可以在所有 hook 中复用。

用法

由于插件可以携带参数/选项， 你必须在 webpack 配置中，向 plugins 属性 出入 new 实例。 根据你的 webpack 用法， 这里有多种方式使用插件。

配置

webpack.config.js
    const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
    const webpack  = require("webpack"); // 访问内置的插件
    const path = require('path');
    
    const config = {
        entry: './path/to/my/entry/file.js',
        output: {
            filename: 'my-first-webpack.bundle.js',
            path: path.resolve(_dirname,'dist')
        },
        module
    }
avatar
文章
阅读
粉丝