Webpack-Getting Started
文章目录

Webpack: Getting Started

运行

一般的运行模式是在 CLI 里面运行 webpack [args……]

但是如果我们有配置文件的话,可以直接在 CLI 里面运行 webpack

  • 配置文件默认名称: webpack.config.js
  • 也可以通过 CLI 指定配置文件的名字

下方所有的内容都和配置文件相关。

Concepts

几个核心概念

  • Entry
  • Output
  • Loaders
  • Plugins

最简单的配置

1
2
3
4
5
6
7
8
9
module.exports = {
entry: [
"./main.js"
],
output: {
path: './output',
filename: 'app.js'
}
};

Entry

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Example 1
module.exports = {
output: {
filename: './dist-amd.js',
libraryTarget: 'amd'
},
context: path.resolve(__dirname, "app")
// 这个是上下文的选项, 这个选项决定了我们从哪一个目录的路径开始算相对路径, 根据当前的设置我们就会使用 /app 作为根目录

entry: './app.js',
mode: 'production',
}


// Example 2
...
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
...

// Example 3
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};

Output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const path = require('path');


/* Example 1: 打包成单独一个文件 */
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'fileName.bundle.js' //这个地方直接写明文件名。
}
};


/* Example 2: 打包成多个文件\ */
...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name]-[hash]-[chunkhash].js'
//如果有多个路口,那么这边就被打包成了多个文件。
// 同时 filename 也可以指定相对路径, 这里我们就打包到了 dist/js/
}
...

// [hash] 代表这一次打包操作的 Hash
// [chunkhash] 代表这一个 Chunk 的 Hash (类似 MD5 加密, 如果打包后的 Hash 没有变化那么源文件也没有变化, 可以用于区分文件唯一性)

Loaders

装载器, 本身 Webpac 仅仅能够理解 JS, 有了 Loader 之后就可以加载其他各种文件
Loaders 的理念将模块化延伸到了其他所有文件上, 所有文件都会被当做模块

CSS 的模块化很好的解决了全局变量污染的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path');

const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};

module.exports = config;

几个关键的参数:

  1. test: 需要处理的文件
  2. use: 对文件进行处理的 loader

因此上方代码, 如果遇到了 txt 扩展名的文件就会使用 raw-loader 进行处理

Hint: 当在 webpack config 中定义 rule 时, 应该放到 module.rules 下面而不是直接放到 rule 下面

Example

*.CSS*.ts全部转为 JS

1
2
3
4
5
6
7
8
9

module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};

Using Loaders

3 种方法:

Configuration: webpack.config.js 里面设置

直接指明对应的loader:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
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 个步骤:

  1. 使用 require 引用这个插件
  2. 添加到module.plugins里面
    • 因为 config 文件会被引用多次, 因此 plugin 每次都要新建一个实例, 因此需要在所有 plugin 前面加个 new
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
//installed via npm

const webpack = require('webpack');
//to access built-in plugins

const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

(Mode)

设置时开发状态development还是产品状态production

1
2
3
module.exports = {
mode: 'production'
};

Webpack VS Gulp/Grunt

Grunt 和 Gulp 的工作方式是: 在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

Webpack 的工作方式是: 把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack 将从这个文件开始找到你的项目的所有依赖文件,使用 loaders 处理它们,最后打包为一个(或多个)浏览器可识别的 JavaScript 文件。

参考文献