Webpack 学习笔记(1) 开始

目录



参考资料

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. 创建一个包

 我们首先安装lodashLodash是一个一致性、模块化、高性能的 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
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页