官方原文: https://webpack.docschina.org/concepts/
Webpack似乎已经到了不得不深入学习的程度了, 要不然有的概念看不明白. 现在居然还有绕过npm install, 用webpack来引入外部库的方式!(PS: 通过后面的学习, 发现webpack确实可以在externals中声明CDN地址的方式来引入外部包)

Webpack是一个静态打包工具. 也就是从各种依赖里把需要的抽取出来, 形成bundle. bundle在webpack里就是包的意思, 也就是"打包"的"包"
所有的配置都是在webpack.config.js中完成的
下面说的react和vue都指的是其cli工具

entry

是入口, 也被称之为chunk块. 默认是./src/index.js , 在react中是app.jsx,在vue中是./src/main.js,

output

是输出的bundle和其他文件的存储位置. 默认是./dist/main.js, 文件位置在dist文件夹中. react和vue都没有改这个文件夹.

loader

是处理除了.js和.json文件打包以外, 其他文件的打包工具. 包括.css, .txt等等. loader是在module.rules中以数组的方式规定的. 每个数组元素包括以正则定义的后缀名test(不知道为啥叫test),和loader名.

plugin

执行除了loader以外的更宽泛任务. plugin需要通过npm install安装后在webpack.config.js前面require进来,然后在plugins下面定义数组元素.

mode

有三种值: production, development, none, 是对开发环境的定义

模块的导入方式

所有导入方式都需要预先npm install这个模块

  • 静态导入, 就是常规的在文件开始import.
  • 动态导入, 在使用模块的函数中, 先使用import导入(异步方式), 再使用模块.
  • 预获取prefetch. 提前动态获取下一个页面要用的模块. 这是通过在js的注释/**/中添加webpack命令实现的.
  • 预加载preload. 在加载本页面前先加载指定模块. 与上面同样是在js注释中实现.

外部化 externals

在创建library时尤其需要关联外部库, 而不是把外部库也打包到自己的库里面. 这儿就是使用externals. 使用了externals之后, 打包bundle就会把import的外部库排除掉.

为生产环境配置不同的config文件

本来嘛, 默认的config文件是webpack.config.js,然而为了生产的打包文件更小, 开发的打包文件更方便/热更新等, 就需要配置两个不同的config文件webpack.prod.js, webpack.dev.js, 然后为了把两个不同的config中共同部分提取公约数, 又有了第三个公共文件webpack.common.js.
另外我又发现在react的项目中, package.json又有一种用一个webpack.config.js实现两种环境的方式. 区分时加上不同的命令行参数:

"scripts": {
    "dev": "webpack-dev-server --config webpack/webpack.config.js --env.mode=development --watch",
    "release": "webpack --config webpack/webpack.config.js --env.mode=production",
    "dev:dualmode": "npm run dev -- --demo=DualmodePanel",
    "release:dualmode": "npm run release -- --demo=DualmodePanel",
    "dev:wugan": "npm run dev -- --demo=NonInductiveDemo",
    "release:wugan": "npm run release -- --demo=NonInductiveDemo"
  },

externals

这个属性只是为了不让webpack去打包指定的内容. 然而在开发时, 这个内容还是要能访问到的. 不管是用npm install,或者在index.html里面用<script>引入, 还是说在externals里面直接指定CDN地址.

标签: none 阅读量: 1288

添加新评论