webpack4从零开始构建(一)

头像
Afterward
    阅读 13 分钟
    1

    前言

    之前一段时间工作原因把精力都放在小程序上,趁现在有点空闲时间,刚好官方文档也补充完整了,我准备重温一下 webpack 之路了,因为官方文档已经写得非常详细,我会大量引用原文描述,主要重点放在怎么从零构建 webpack4 代码上,这不是一个系统的教程,而是从零摸索一步步搭建起来的笔记,所以前期可能bug会后续发现继续修复而不是修改文章.

    系列文章

    webpack4从零开始构建(一)
    webpack4+React16项目构建(二)
    webpack4功能配置划分细化(三)
    webpack4引入Ant Design和Typescript(四)
    webpack4代码去重,简化信息和构建优化(五)
    webpack4配置Vue版脚手架(六)

    当前文章完整配置webpack4_demo

    PS:
    2018/12/12 修改细节布局
    2018/12/19 新增包管理工具介绍
    2018/12/26上传,代码同步到第四篇文章
    2019/03/14上传,补充代码到第一篇文章,status1分支可见

    淘宝 NPM 镜像

    因为npm包是从国外服务器下载插件,速度慢,容易失败,我们平时使用可以使用淘宝团队的替代镜像.

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    从 registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPM registry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.

    淘宝 NPM 镜像

    Yarn 包管理

    Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

    Node 版本支持: ^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0

    官网安装

    初始化一个新项目

    yarn init

    添加依赖包

    yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

    将依赖项添加到不同依赖项类别中,分别添加到 devDependencies、peerDependencies 和 optionalDependencies 类别中：

    yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

    升级依赖包

    yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

    移除依赖包

    yarn remove [package]

    安装项目的全部依赖

    yarn

    Node 版本管理

    我们可以安装一个版本管理器,根据需求切换.
    nvm-windows

    安装版本

    nvm install <version> [arch]

    移除版本

    nvm uninstall <version>

    查看已安装版本

    nvm ls

    切换版本

    nvm use [version] [arch]

    概念

    本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。

    核心:

    1. 入口(entry)
    2. 输出(output)
    3. 加载器(loader)
    4. 插件(plugins)

    安装

    因为最高版本 nodejs 有点问题,所以建议用@9.0,当然用 10 也是可以的,只是每次都会警告太烦了.
    安装依赖你们也可能选择其他安装方式

    yarn add webpack

    webpack4+版本还需要安装

    yarn add webpack-cli

    完成之后打开目录下的 package.json 可以看到当前依赖

    {
  "dependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "name": "webpack_demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

    准备工作

    根目录新增 index.html

    <!doctype html>
<html>

<head>
    <title>webpack</title>
</head>

<body>
    <p>hello world!</p>
    <script src="index.js"></script>
</body>

</html>

    创建 src 目录,新增style.scss 和 index.js备用

    html {
  background-color: #666;
  p {
    color: red;
  }
}
    console.log('onload');

    正常打开 index.html 没毛病

    起步

    根目录新增webpack.config.js 文件

    const path = require("path");

module.exports = {
  // 入口
  entry: "./src/index.js",
  // 输出
  output: {
    // 打包文件名
    filename: "main.js",
    // 输出路径
    path: path.resolve(__dirname, "dist"),
    // 资源请求路径
    publicPath: '/',
  }
};

    将 index.html 的 js 引用路径替换成输出路径

    <script src="src/index.js"></script>
--------------------------------------
<script src="dist/main.js"></script>

    执行命令

    npx webpack --config webpack.config.js

    打包完成之后直接打开 index.html 看,没毛病.

    npx

    npx 是 npm@5.2.0+后出现的工具,总的来说用法有几个

    直接执行命令

    一般我们会在 package.json 配置一些命令然后执行,例如

    npm run xxx

    但是我们可以直接用 npx 运行

    npx xxx

    临时安装调用

    npx create-react-app my-cool-new-app

    执行这行命令 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！帮你下载并且执行 create-react-app,完了以后还不会留下痕迹

    因为我们已经安装过 webpack 了,这么长的命令还是直接在 package.json 配置调用吧

    mode

    刚才打包的时候如果在终端看到这段提示

    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concep...

    这是因为 webpack4 增加的一个配置项设定运行环境,通过将 mode 参数设置为 development, production 或 none，可以启用对应环境下 webpack 内置的优化。默认值为 production。业务代码中可以通过 process.env.NODE_ENV 获取到当前环境模式做些不同处理

    直接在 webpack.config.js 加上解决警告

    mode: 'development'

    index.js改成

    console.log(process.env.NODE_ENV);

    重新打包查看效果

    development 和 production 相同与区别

    common

    // parent chunk中解决了的chunk会被删除
optimization.removeAvailableModules: true

// 删除空的chunks
optimization.removeEmptyChunks: true

// 合并重复的chunk
optimization.mergeDuplicateChunks: true

    development

    // 调试
devtool: eval

// 缓存模块, 避免在未更改时重建它们。
cache: true

// 缓存已解决的依赖项, 避免重新解析它们。
module.unsafeCache: true

// 在 bundle 中引入「所包含模块信息」的相关注释
output.pathinfo: true

// 在可能的情况下确定每个模块的导出,被用于其他优化或代码生成。
optimization.providedExports: true

// 找到chunk中共享的模块,取出来生成单独的chunk
optimization.splitChunks: true

// 为 webpack 运行时代码创建单独的chunk
optimization.runtimeChunk: true

// 编译错误时不写入到输出
optimization.noEmitOnErrors: true

// 给模块有意义的名称代替ids
optimization.namedModules: true

// 给模chunk有意义的名称代替ids
optimization.namedChunks: true

    production

    // 性能相关配置
performance: {
  hints: "error"....
}

// 某些chunk的子chunk已一种方式被确定和标记,这些子chunks在加载更大的块时不必加载
optimization.flagIncludedChunks: true

// 给经常使用的ids更短的值
optimization.occurrenceOrder: true

// 确定每个模块下被使用的导出
optimization.usedExports: true

// 识别package.json or rules sideEffects 标志
optimization.sideEffects: true

// 尝试查找模块图中可以安全连接到单个模块中的段。- -
optimization.concatenateModules: true

// 使用uglify-js压缩代码
optimization.minimize: true

    loader

    因为 webpack 用于编译 JavaScript 模块,样式不在它的能力范围内,所以我们需要引入 loader 做处理.它支持引入任何其他类型的文件使用.

    执行命令安装依赖

    yarn add style-loader css-loader sass-loader node-sass

    修改一下 webpack.config.js

    const path = require("path");

module.exports = {
  // 入口
  entry: "./src/index.js",

  // 输出
  output: {
    // 打包文件名
    filename: "main.js",
    // 输出路径
    path: path.resolve(__dirname, "dist"),
    // 资源请求路径
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(css|scss)$/, // 匹配文件
        use: [
          "style-loader", // 使用<style>将css-loader内部样式注入到我们的HTML页面
          "css-loader", // 加载.css文件将其转换为JS模块
          "sass-loader" // 加载 SASS / SCSS 文件并将其编译为 CSS
        ]
      }
    ]
  }
};

    注意一下引用顺序,处理是从右到左的,所以上面会先编译样式转成模块再注入.

    index.js 引入样式

    import "./style.scss";

    package.json 配置执行命令

    "dev": "webpack"

    执行命令

    npm run dev

    执行完看 dist 文件夹还是只有 main.js,刷新页面看到样式已经被内嵌入页面的 head 位置了.

    还有其他的一些文件如图片,字体,文档等官方文档很详细了,这里略过,直接安装依赖

    yarn add file-loader xml-loader html-loader

    图片处理

    当你们在 js 引入图片的时候,该图像将被处理并添加到 output 目录，并且变量将包含该图像在处理后的最终 url,例如

    import img from "./1.jpg";
---------------------------------------
32bbef3c0cb97aa96aaa0a07f3bfc5e4.jpg

    同样标签中的图片和样式中的图片也会分别使用 html-loader/css-loaderj 进行类似的处理

    接下来修改 webpack.config.js

    const path = require("path");

module.exports = {
  // 入口
  entry: "./src/index.js",
  // 输出
  output: {
    // 文件名
    filename: "main.js",
    // 输出路径
    path: path.resolve(__dirname, "dist"),
    // 资源请求路径
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.scss$/, // 匹配文件
        use: [
          "style-loader", // 使用<style>将css-loader内部样式注入到我们的HTML页面
          "css-loader", // 加载.css文件将其转换为JS模块
          "sass-loader" // 加载 SASS / SCSS 文件并将其编译为 CSS
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/, // 图片处理
        use: ["file-loader"]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/, // 字体处理
        use: ["file-loader"]
      },
      {
        test: /\.xml$/, // 文件处理
        use: ["xml-loader"]
      },
      {
        test: /\.html$/, // 处理html资源如图片
        use: ["html-loader"]
      }
    ]
  }
};

    管理输出

    上面我们已经完成了基本的 webpack 使用,接着随着项目增大我们可能会新增多个入口,切割多份代码,这时候继续写死输出资源名字就不合适了,所以我们接下来会引入动态命名.

    output.filename 有一些可用的模板

    模板 描述
    [hash:length(默认 20)] 模块标识符(module identifier)的 hash
    [chunkhash:length(默认 20)]] chunk 内容的 hash
    [name] 模块名称
    [id] 模块标识符(module identifier)
    [query] 模块的 query，例如，文件名 ? 后面的字符串

    然后我们修改 webpack.config.js 输入文件名

    filename: '[name].bundle.js'

    到了这一步就已经能够输出文件了.但是别急,还有一个关键问题是我们怎么动态引入文件?

    plugin

    HtmlWebpackPlugin

    HtmlWebpackPlugin 可以生成创建 html 入口文件,动态引入编译后的外部资源.
    执行命令安装依赖

    yarn add html-webpack-plugin
    plugins: [
  new HtmlWebpackPlugin({
    title: "test", // title
    template: "index.html" // 以index为模板
  })
]

    运行命令后看到 dist 文件夹多了一个 index.html,这就是我们动态创建的入口文件了,直接打开看看效果.

    clean-webpack-plugin

    执行命令安装依赖

    yarn add clean-webpack-plugin

    这个插件可以帮你每次构建之前先删除一些没用的遗留文件,推荐每次打包前先删除整个 dist 文件
    接下来修改 webpack.config.js, plugin 内新增插件

    new CleanWebpackPlugin()

    webpack-dev-server

    webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时[color=#2b91e3]重新加载(live reloading)
    执行命令安装依赖

    yarn add webpack-dev-server

    然后我们修改 webpack.config.js 新增配置

    devServer: {
    // 打开模式, Iframe mode和Inline mode最后达到的效果都是一样的，都是监听文件的变化，然后再将编译后的文件推送到前端，完成页面的reload的
    inline: true,
    // 指定了服务器资源的根目录
    contentBase: path.join(__dirname, 'dist'),
    // 是否开启gzip压缩
    compress: false,
    port: 9000,
    // 是否开启热替换功能
    hot: true,
    // 是否自动打开页面,可以传入指定浏览器名字打开
    open: true,
},

    在 package.json 里新配置一条命令

    "start": "webpack-dev-server"

    运行命令之后会自动帮你从浏览器中启动页面http://localhost:8080/,后续一直监听代码变化,改动之后会自动刷新页面看到效果.
    注意的是 webpack-dev-server 输出的文件只存在于内存中,不输出真实的文件

    模块热替换(Hot Module Replacement 或 HMR)

    刚才的 webpack-dev-server 配置虽然方便,但是是属于整体重载,很多时候我们只是修改一些小地方的话没必要这么耗费资源
    模块热替换功能会在应用程序运行过程中替换、添加或删除模块，无需重新加载整个页面。

    第一步,devServer 里 hot 替换成 hotOnly 配置
    第二步,引入 webpack,plugin 里加入

    new webpack.HotModuleReplacementPlugin()

    webpack.config.js 整体大概如此

    const webpack = require('webpack');
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: "development",
  // 入口
  entry: "./src/index.js",
  // 输出
  output: {
    // 打包文件名
    filename: "[name].bundle.js",
    // 输出路径
    path: path.resolve(__dirname, "dist"),
    // 资源请求路径
    publicPath: '/',
  },
  devServer: {
    // 打开模式, Iframe mode和Inline mode最后达到的效果都是一样的，都是监听文件的变化，然后再将编译后的文件推送到前端，完成页面的reload的
    inline: true,
    // 指定了服务器资源的根目录
    contentBase: path.join(__dirname, 'dist'),
    // 是否开启gzip压缩
    compress: false,
    port: 9000,
    // 是否开启热替换功能
    // hot: true,
    // 是否自动打开页面,可以传入指定浏览器名字打开
    open: true,
    // 是否开启部分热替换功能
    hotOnly: true
  },
  module: {
    // 省略
  },
  plugins: [
    // 清除文件
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // title
      title: "test",
      // 模板
      template: "index.html"
    }),
    // 热替换模块
    new webpack.HotModuleReplacementPlugin()
  ]
};

    你们可以新建一个模块例如test.js

    export function log() {
    console.log("123");
}

    然后 index.js 修改如下

    import "./style.scss";
import {
  log
} from "./test";
console.log(process.env.NODE_ENV);
if (module.hot) {
  module.hot.accept('./test', function () {
    console.log('Accepting the updated printMe module!');
    log();
  })
}

    然后分别修改 index.js 和 test.js 看看控制台更新情况,现在更新范围仅限test.js文件了

    其他代码和框架

    社区还有许多其他 loader 和示例，可以使 HMR 与各种框架和库(library)平滑地进行交互……

    • React Hot Loader：实时调整 react 组件。
    • Vue Loader：此 loader 支持用于 vue 组件的 HMR，提供开箱即用体验。
    • Elm Hot Loader：支持用于 Elm 程序语言的 HMR。
    • Redux HMR：无需 loader 或插件！只需对 main store 文件进行简单的修改。
    • Angular HMR：No loader necessary! A simple change to your main * NgModule file is all that's required to have full control over the HMR APIs.没有必要使用 loader！只需对主要的 NgModule 文件进行简单的修改，由 HMR API 完全控制。

    tree shaking

    webpack 2 正式版本内置支持 ES2015 模块（也叫做 harmony 模块）和未引用模块检测能力。新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 "纯净"，由此可以安全地删除文件中未使用的部分。

    基于 ES6 的静态引用，tree shaking 通过扫描所有 ES6 的 export，找出被 import 的内容并添加到最终代码中。 webpack 的实现是把所有 import 标记为有使用/无使用两种，在后续压缩时进行区别处理。

    我们可以先看看效果,在test.js下新增方法

    export function dead() {
    console.log(321);
}

    index.js修改如下

    import {
  log,
  dead
} from "./test";

log();

    运行命令之后然后打开dist目录下的文件找到这段编译代码,即使index.js引用了dead方法,但是没有使用的话编译文件依然会删除
    图片描述

    按理说应该会包含dead方法引入,但是不知道是不是webpack4优化了这些步骤免去我们手动解决的烦恼,后续再研究.

    source map

    应该都知道用来映射代码方便调试

    devtool 构建速度 重新构建速度 生产环境 品质(quality)
    (none) +++ +++ yes 打包后的代码
    eval +++ +++ no 生成后的代码
    cheap-eval-source-map + ++ no 转换过的代码（仅限行）
    cheap-module-eval-source-map o ++ no 原始源代码（仅限行）
    eval-source-map -- + no 原始源代码
    cheap-source-map + o yes 转换过的代码（仅限行）
    cheap-module-source-map o - yes 原始源代码（仅限行）
    inline-cheap-source-map + o no 转换过的代码（仅限行）
    inline-cheap-module-source-map o - no 原始源代码（仅限行）
    source-map -- -- yes 原始源代码
    inline-source-map -- -- no 原始源代码
    hidden-source-map -- -- yes 原始源代码
    nosources-source-map -- -- yes 无源代码内容

    +++ 非常快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢

    配置环境

    项目开发过程一般至少分开发环境和生产环境

    开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

    执行命令安装依赖webpack-merge,这个插件可以合并配置文件输出

    yarn add webpack-merge

    创建公用配置文件webpack.common.js

    const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  // 入口
  entry: "./src/index.js",
  // 输出
  output: {
    // 打包文件名
    filename: "[name].bundle.js",
    // 输出路径
    path: path.resolve(__dirname, "dist"),
    // 资源请求路径
    publicPath: ""
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/, // 匹配文件
        use: [
          "style-loader", // 使用<style>将css-loader内部样式注入到我们的HTML页面
          "css-loader", // 加载.css文件将其转换为JS模块
          "sass-loader" // 加载 SASS / SCSS 文件并将其编译为 CSS
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/, // 图片处理
        use: ["file-loader"]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/, // 字体处理
        use: ["file-loader"]
      },
      {
        test: /\.xml$/, // 文件处理
        use: ["xml-loader"]
      },
      {
        test: /\.html$/, // 处理html资源如图片
        use: ["html-loader"]
      }
    ]
  },
  plugins: [
    // 清除文件
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // title
      title: "test",
      // 模板
      template: "index.html"
    })
  ]
};

    创建生产配置文件webpack.dev.js

    const merge = require('webpack-merge');
const common = require('./webpack.common.js');


module.exports = merge(common, {
  mode: "development",
  // 原始源代码（仅限行）
  devtool: 'cheap-module-eval-source-map',
})

    创建生产配置文件webpack.prod.js

    const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: "production",
    // 原始源代码
    devtool: 'source-map',
})

    创建开发环境文件webpack.server.js

    const webpack = require("webpack");
const path = require("path");
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: "development",
  // 原始源代码（仅限行）
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // 打开模式, Iframe mode和Inline mode最后达到的效果都是一样的，都是监听文件的变化，然后再将编译后的文件推送到前端，完成页面的reload的
    inline: true,
    // 指定了服务器资源的根目录
    contentBase: path.join(__dirname, 'dist'),
    // 是否开启gzip压缩
    compress: false,
    port: 9000,
    // 是否开启热替换功能
    // hot: true,
    // 是否自动打开页面,可以传入指定浏览器名字打开
    open: false,
    // 是否开启部分热替换功能
    hotOnly: true
  },
  plugins: [
    // 热替换模块
    new webpack.HotModuleReplacementPlugin()
  ]
})

    最后package.json命令配置修改如下:

    "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --config webpack.server.js"
},
  "dependencies": {
    "clean-webpack-plugin": "^2.0.0",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.2.1",
    "xml-loader": "^1.2.1"
  },

    第一阶段构建基本完成了,然后我们可以再深度拓展一下

    webpack
    Afterward
    621 声望62 粉丝

    努力去做，对的坚持，静待结果

    « 上一篇
    一些前端算法詳解 --- (不定时更新)
    下一篇 »
    webpack4+React16项目构建(二)

    引用和评论

    被 9 篇内容引用
    推荐阅读
    头像
    Vue3版3D老虎机实现思路

    Afterward阅读 2.9k评论 1

    头像
    开发自定义Taro插件解决跨平台难题

    南玖赞 1阅读 2.4k

    头像
    JS工程化集锦

    specialcoder赞 2阅读 2k

    头像
    macOS上HBuildX 开发 uni-app项目，运行调试时编辑保存文件不会自动编译更新页面

    RobinTang阅读 3.4k

    头像
    compression-webpack-plugin项目加载优化+nginx配置

    灰太狼的情与殇阅读 1.8k

    头像
    你的项目刚刚启动？是时候考虑Globalization了！

    注销阅读 1.7k

    头像
    ABAP system landscape和vue项目webpack构建的最佳实践

    注销阅读 1.4k

    0 条评论
    得票最新