参考资料

Getting Started | Webpack

webpack | v4.16.3

本文以一个实例webpack-demo来记录 webpack 的使用。在使用 webpack 前，应保证能使用 npm 命令。

安装 Webpack 时，官方推荐使用独立安装（Local Installation）而不是使用全局安装（Global Installation），即在需要用到的模块中安装webpack。这样的好处在于，当新的需求被引入时，项目的独立更新变得容易。

1. 基础设定

首先我们创建一个目录，初始化 npm ，然后在目录中安装 webpack 和 webpack-cli（这是个运行 webpack 的命令行工具）：

$ mkdir webpack-demo && cd webpack-demo

$ npm init -y

$ npm install webpack webpack-cli --save-dev

然后在webpack-demo文件夹下构建如下结构（加号+代表添加的文件及文件夹）：

  webpack-demo

  |- package.json

+ |- /dist

+   |- index.html

+ |- /src

+   |- index.js

dist/index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Getting Starting</title>

</head>

<body>

    <script src="main.js"></script>

</body>

</html>

src/index.js

import _ from 'lodash';

function component() {

  var element = document.createElement('div');

    // Lodash, now imported by this script

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;

  }

  document.body.appendChild(component());

接着打开package.json文件。为了移除默认的程序入口，将main字段删除；为避免程序被已外发部，设置private字段为true。

  {

    "name": "webpack-demo",

    "version": "1.0.0",

    "description": "",

+   "private": true,

-   "main": "index.js",

    "scripts": {

      "test": "echo \"Error: no test specified\" && exit 1"

    },

    "keywords": [],

    "author": "",

    "license": "ISC",

    "devDependencies": {

      "webpack": "^4.0.1",

      "webpack-cli": "^2.0.9"

    },

    "dependencies": {}

  }

基本配置完毕。可以看到，我们设置了dist文件夹和src文件夹将“distribution”代码和“source”代码分离，“source”是我们书写和编辑的部分，“distribution”是最终浏览器加载的最小化和最优化的程序输出结果。

2. 创建一个包

我们首先安装lodash。Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。（在index.js中引用）

$ npm install lodash --save-dev

在 index.js 的代码中，我们明确要求引用 lodash 并使用 _ 将其绑定。通过说明模块需要哪些依赖关系，webpack可以使用这些信息来建立依赖关系图。然后，它使用这些关系图生成一个优化的、将代码内容正确组织的捆绑包。

安装完毕后我们在当前目录下运行命令npx webpack，该命令将src/index.js作为切入点，生成dist/main.js作为输出。

此时，用浏览器打开index.html，可以看到网页中显示“Hello webpack”。

补充说明：npx有什么用：npx允许开发者直接使用模块（module）内提供的命令行工具（省得输入目录）；

// 直接使用模块内命令行工具

$ node_modules\.bin\webpack

// 在npx支持下使用模块内命令行工具

$ npx webpack

3. 使用配置文件完成打包命令

虽然在4.x版本之后的 webpack 不再需要任何配置，但是大多数项目都包含了许多复杂的配置，因此 webpack 支持配置文件。这比在终端手动输入大量命令要高效得多，我们可以创建一个配置文件来代替上面用到的命令行选项：

在 webpack-demo 文件夹下新建文件：webpack.config.js

webpack.config.js

const path = require('path');

module.exports = {

  entry: './src/index.js',

  output: {

    filename: 'main.js',

    path: path.resolve(__dirname, 'dist')

  }

};

此时可以把/dist/main.js文件删除，再次构建程序，但此时采用的是借助配置文件的方法：

# 方法一：

$ npx webpack --config webpack.config.js

# 方法二：

$ npx webpack

得益于 webpack-cli 的运行机制，如果当前目录中存在 webpack.config.js 文件，webpack 命令会默认使用它。当然，使用 --config 选项是为了说明我们可以加载任意命名的配置文件（这对于需要被拆分为多个文件的复杂配置十分有用）。

使用配置文件构建项目有个好处：入口文件和输出文件的文件名、路径可以自定义，而不仅被限制使用系统规定的index.js、main.js之类，将会使开发更加灵活。

4. 使用 NPM Scripts 完成打包命令

scripts | npm Document

直接使用命令行执行 webpack 命令难免显得有点繁琐和枯燥，我们可以使用 NPM Script 为打包命令创建“快捷键”。

在 package.json 文件中有一个 scripts 字段，我们在其中添加 build 字段，并为该字段赋值 webpack：

 {

   "name": "webpack-demo",

   "version": "1.0.0",

   "description": "",

   "private": true,

   "scripts": {

     "test": "echo \"Error: no test specified\" && exit 1",

+    "build": "webpack"

   },

   "keywords": [],

   "author": "",

   "license": "ISC",

   "devDependencies": {

     "lodash": "^4.17.10",

     "webpack": "^4.16.3",

     "webpack-cli": "^3.1.0"

   }

 }

现在，npm run build 命令可以用来代替我们之前使用的 npx webpack 命令：

$ npm run build

注意：在 scripts 字段中，我们可以引用本地的命令行工具包，就像我们使用 npx 访问的一样。

最终我们文件夹的目录结构如下：

  webpack-demo

  |- node_modules

  |- /dist

    |- index.html

    |- main.js

  |- /src

    |- index.js

  |- package.json

  |- package-lock.json

  |- webpack.config.js

巴特西

Webpack 学习笔记（1）开始

参考资料

1. 基础设定

2. 创建一个包

3. 使用配置文件完成打包命令

4. 使用 NPM Scripts 完成打包命令

最新文章

热门文章

巴特西

Webpack 学习笔记（1） 开始

参考资料

1. 基础设定

2. 创建一个包

3. 使用配置文件完成打包命令

4. 使用 NPM Scripts 完成打包命令

最新文章

热门文章

Webpack 学习笔记（1）开始