webpack

安装：

  • npm i webpack -D || npm i webpack@4.40.2 -D
  • npm i webpack-cli -D 如果使用 webpack v4+ 版本，还需要安装 CLI。

执行

  • 可以在package.json文件中配置scripts，执行webpack任务。
  1. "scripts": {
  2.         "bulid": "webpack"
  3.     }

配置

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，但它仍然有着 高度可配置性，可以很好满足需求。

入口【entry】

入口起点指示webpack应该使用哪个模块，用来作为依赖文件的开始，默认是src/index.js，但是可以在webpack.config.js中配置入口属性，来指定一个或多个不同的入口起点。

参考文档：[https://v4.webpack.docschina.org/concepts/entry-points/](https://v4.webpack.docschina.org/concepts/entry-points/)

示例代码：

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

输出【output】

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

可以通过在配置中指定一个 output 字段，配置处理过程。

可以指定 publicPath 属性，配置CDN资源的使用。如果在编译时，不知道最终输出文件的 publicPath 是什么地址，则可以将其留空，并且在运行时通过入口起点文件中的 __webpack_public_path__ 动态设置。

参考文档：https://v4.webpack.docschina.org/concepts/output/

const path = require("path");

module.exports = {
    entry: "./file/main.js",
    output: {
        path: path.join(__dirname, "output"),
        filename: "bundle.js",
        publicPath: "dist/"
    },
};

模式【mode】

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

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

资源模块加载【loader】

loader 是实现整个前端模块化的核心，是 webpack 的核心特性，通过不同的 loader 就可以加载任何类型的资源。

webpack默认是打包js文件，如果想要打包css文件，则需要安装css依赖。
npm i css-loader -D
npm i style-loader -D

使用loader
  • 配置（推荐）：在 webpack.config.js 文件中指定 loader。
  • 内联：在每个 import 语句中显式指定 loader。
  • CLI：在 shell 命令中指定它们。

配置(configuration)

module.rules允许在webpack配置中指定多个loader，loader的执行顺序是从左到右。下面的示例代码中，是先执行 css-loader 然后再执行 style-loader。

const path = require("path");

module.exports = {
    mode: "none",
    entry: ["./src/main.css", "./src/main.js"],
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
        }, ],
    },
};

内联(inline)

可以在 import 语句或任何 等同于 “import” 的方法 中指定 loader。使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI

在shell命令中执行。

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

文件资源加载器

安装：npm i file-loader -D
在一个 bundle 文件中 import（或 require）目标文件：
import icon from "./img.png"

参考文档：https://v4.webpack.docschina.org/loaders/file-loader/

配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

webpack url 加载器

除了传统的文件加载之外，也可以通过 Data URLS 的方式加载文件，Data URLs是一种特殊的url协议，可以用来直接表示一个文件，传统的url要求服务器上有一个文件，然后url对应服务器上的这个文件，在请求这个url的时候，得到服务器上对应的这个文件.

Data URLS是当前url就可以直接去表示文件内容的一种方式，这种url中的文本，就已经包含了文件当中的内容。在使用这种url的时候，就不用再发送请求去获取文件内容了。如果内容是图片或者文本内容的文件，可以通过base64编码，以编码后的结果，也就是一个字符串来表示这个文件的内容。例如：data:image/png;base64,ivBorw....QmCC

安装：npm i url-loader -D

配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024
            },
          },
        ],
      },
    ],
  },
};

使用场景：

  • 小文件使用 Data URLS，减少请求次数。
  • 大文件使用 file loaders 单独提取存放，提高加载速度。
  • 可以在使用的时候，配置 potions 中的 limit 属性，当超出配置的大小的时候，就使用 file-loader

webpack 常用加载器分类

编译转换类：会将模块编译成JavaScript代码。

  • css-loader：将css文件转义成js中的一个模块，通过JavaScript运行css模块。

文件操作类型：会将加载到的资源模块，拷贝到输出的目录，同时将这个项目文件的访问目录导出。

  • file-loader

代码检查类：对加载的资源文件，一般是代码，进行校验的加载器，目的是为了统一代码风格，提高代码质量。一般不会修改生产环境的代码。

  • eslint-loader:

webpack 与 ES2015

webpack默认并不能转换ES6新语法，需要安装依赖 babel-loader