文章目录
Webpack: Getting Started
运行
一般的运行模式是在 CLI 里面运行 webpack [args……]
但是如果我们有配置文件的话,可以直接在 CLI 里面运行 webpack
- 配置文件默认名称:
webpack.config.js
- 也可以通过 CLI 指定配置文件的名字
下方所有的内容都和配置文件相关。
Concepts
几个核心概念
- Entry
- Output
- Loaders
- Plugins
最简单的配置
1 | module.exports = { |
Entry
1 | // Example 1 |
Output
1 | const path = require('path'); |
Loaders
装载器, 本身 Webpac 仅仅能够理解 JS, 有了 Loader 之后就可以加载其他各种文件
Loaders 的理念将模块化延伸到了其他所有文件上, 所有文件都会被当做模块
CSS 的模块化很好的解决了全局变量污染的问题
1 | const path = require('path'); |
几个关键的参数:
- test: 需要处理的文件
- use: 对文件进行处理的 loader
因此上方代码, 如果遇到了 txt 扩展名的文件就会使用 raw-loader 进行处理
Hint: 当在 webpack config 中定义 rule 时, 应该放到 module.rules 下面而不是直接放到 rule 下面Example
*.CSS
和*.ts
全部转为 JS
1 |
|
Using Loaders
3 种方法:
Configuration: webpack.config.js 里面设置
直接指明对应的loader
:
1 | module: { |
Inline: 使用 import 关键字引用 loaders
1 | import Styles from 'style-loader!css-loader?modules!./styles.css'; |
- 感叹号分割, 问号后面带的是参数
- 路径都是相对路径
CLI: 命令行处理时加上参数
1 | webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader' |
懒得写了, 正常人不会这么用的
Plugins
处理一下比 loader 更为复杂的任务
添加 Plugin 需要 2 个步骤:
- 使用 require 引用这个插件
- 添加到
module.plugins
里面
- 因为 config 文件会被引用多次, 因此 plugin 每次都要新建一个实例, 因此需要在所有 plugin 前面加个
new
1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); |
(Mode)
设置时开发状态development
还是产品状态production
1 | module.exports = { |
Webpack VS Gulp/Grunt
Grunt 和 Gulp 的工作方式是: 在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。
Webpack 的工作方式是: 把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack 将从这个文件开始找到你的项目的所有依赖文件,使用 loaders 处理它们,最后打包为一个(或多个)浏览器可识别的 JavaScript 文件。