参考资料

Getting Started | Webpack

webpack | v4.16.3

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

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

1. 基础设定

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

  1. $ mkdir webpack-demo && cd webpack-demo
  2. $ npm init -y
  3. $ npm install webpack webpack-cli --save-dev

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

  1.   webpack-demo
  2.   |- package.json
  3. + |- /dist
  4. +   |- index.html
  5. + |- /src
  6. +   |- index.js

dist/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Getting Starting</title>
  6. </head>
  7. <body>
  8.     <script src="main.js"></script>
  9. </body>
  10. </html>

src/index.js

  1. import _ from 'lodash';
  3. function component() {
  4.   var element = document.createElement('div');
  6.     // Lodash, now imported by this script
  7.     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  9.     return element;
  10.   }
  12.   document.body.appendChild(component());

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

  1.   {
  2.     "name": "webpack-demo",
  3.     "version": "1.0.0",
  4.     "description": "",
  5. +   "private": true,
  6. -   "main": "index.js",
  7.     "scripts": {
  8.       "test": "echo \"Error: no test specified\" && exit 1"
  9.     },
  10.     "keywords": [],
  11.     "author": "",
  12.     "license": "ISC",
  13.     "devDependencies": {
  14.       "webpack": "^4.0.1",
  15.       "webpack-cli": "^2.0.9"
  16.     },
  17.     "dependencies": {}
  18.   }

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

2. 创建一个包

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

  1. $ npm install lodash --save-dev

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

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

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

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

  1. // 直接使用模块内命令行工具
  2. $ node_modules\.bin\webpack
  4. // 在npx支持下使用模块内命令行工具
  5. $ npx webpack

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

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

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

 webpack.config.js

  1. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'main.js',
  7.     path: path.resolve(__dirname, 'dist')
  8.   }
  9. };

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

  1. # 方法一：
  2. $ npx webpack --config webpack.config.js
  4. # 方法二：
  5. $ 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：

  1.  {
  2.    "name": "webpack-demo",
  3.    "version": "1.0.0",
  4.    "description": "",
  5.    "private": true,
  6.    "scripts": {
  7.      "test": "echo \"Error: no test specified\" && exit 1",
  8. +    "build": "webpack"
  9.    },
  10.    "keywords": [],
  11.    "author": "",
  12.    "license": "ISC",
  13.    "devDependencies": {
  14.      "lodash": "^4.17.10",
  15.      "webpack": "^4.16.3",
  16.      "webpack-cli": "^3.1.0"
  17.    }
  18.  }

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

  1. $ npm run build

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

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

  1.   webpack-demo
  2.   |- node_modules
  3.   |- /dist
  4.     |- index.html
  5.     |- main.js
  6.   |- /src
  7.     |- index.js
  8.   |- package.json
  9.   |- package-lock.json
  10.   |- webpack.config.js

Webpack 学习笔记（1） 开始的更多相关文章

  1. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  2. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  3. webpack学习笔记（二）-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  4. webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  5. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  6. Webpack学习笔记一：What is webpack

      #,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...

  7. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  8. 【webpack学习笔记】a04-建立开发环境

    开发环境就是在开发过程中为了方便配置的环境,生产环境就是开发完成即将上线的情况. 好了,说了句废话,切入正题. 在开发时,打包后的文件压缩成一团,报错调试的时候傻眼了有木有?每次做出修改需要到浏览器查 ...

  9. Webpack 学习笔记总结

    Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...

  10. webpack学习笔记丁点积累

    webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...

随机推荐

  1. FZU 2129 子序列个数（DP）题解

    题意:求子序列种数 思路:dp[i]代表到i的所有种数,把当前i放到末尾,那么转移方程dp[i] = dp[i - 1] + dp[i -1],但是可能存在重复,比如1 2 3 2,在第2位置的时候出 ...

  2. μC/OS-III---I笔记9---任务等待多个内核对象和任务内建信号量与消息队列

    在一个任务等待多个内核对象在之前,信号量和消息队列的发布过程中都有等待多个内核对象判断的函数,所谓任务等待多个内核对象顾名思义就是一任务同时等待多个内核对象而被挂起,在USOC-III中一个任务等待多 ...

  3. SVG path d Attribute

    Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011 http://www.w3. ...

  4. Professional JavaScript for Web Developers 4th Edition

    Professional JavaScript for Web Developers 4th Edition learning notes / 学习笔记 https://github.com/xgqf ...

  5. TweenMax & GSAP & SVG Animation

    TweenMax & GSAP & SVG Animation svg animation https://greensock.com/tweenmax GSAP https://ww ...

  6. div & drop

    div & drop uplaod file & prevent dropleave https://www.runoob.com/jsref/event-ondrop.html ht ...

  7. 什么是USDN稳定币？USDN的应用价值是什么？

    9月22日,美国货币监理署(OCC)发布了一项稳定币指南,主要内容围绕的是稳定币的监管及相关规定.一时间,稳定币得到了市场上广泛的关注.那么,什么是稳定币呢?什么又是USDN稳定币呢? 1.什么是稳定 ...

  8. 工具类：每次随机生成有销售库存有实际库存的1个店铺商品和对应的2个店铺商品sku

    # coding:utf-8 # @fileName :2.每次随机生成有销售库存有实际库存的1个店铺商品和对应的2个店铺商品sku.py # @createTime :2020/4/4 10:33 ...

  9. Python算法_排序数组（09）

    给你一个整数数组 nums,请你将该数组升序排列. 示例 1: 输入:nums = [5,2,3,1]输出:[1,2,3,5] 示例 2: 输入:nums = [5,1,1,2,0,0]输出:[0,0 ...

  10. react小白笔记

    diff算法主要是同级比较,生成数组,进行数组替换 reducer可以接收state,但是绝不能修改state 纯函数指的是:给固定收入,就一定有固定的输出,而且不会有任何副作用[不能例如:new d ...