Webpack 学习笔记

一、Webpack 是什么?

Webpack 是 JavaScript 模块化打包工具,其核心思想是:一切皆模块(loader)。到目前为止,Webpack 官方收录的 Loaders 就有 40 个。

二、安装

局部安装

安装最新或指定版本,终端运行其中一个命名:

1
2
npm install --save-dev webpack
npm install --save-dev [email protected]<version>

局部安装仅限于项目内使用,可直接运行 node_modules/.bin/webpack 或添加到 npm scripts:

1
2
3
"scripts": {
"build": "node_modules/.bin/webpack --config webpack.config.js"
}

项目根目录下运行 npm run build 开始打包。

全局安装

全局安装的方式可直接运行 webpack,不推荐使用这样方式,特别是项目需要用指定的版本。

1
npm install --global webpack

三、配置

webpack.config.js 是 Webpack 是配置文件,一个简单的配置文件看起来是这样的:

1
2
3
4
5
6
7
8
9
var path = require('path');

module.exports = {
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};

这里的 Webpack 配置使用的是 CommonJS require() 声明,Webpack 2 还支持 ES2015 import 声明。

entry

模块入口,分为单入口和多入口,可理解为单入口打包的目标文件是一个,多入口打包的目标文件有多个。
单入口用法:entry: string|Array<string>
多入口用法:entry: {[entryChunkName: string]: string|Array<string>}

entry 详细配置

output

output 配置项是告诉 Webpack 如何保存打包好的文件。
path 必须,输出文件的目标文件夹,绝对路径。
filename 必须,目标文件名。

output 详细配置

module

这个配置项主要是 Webpack 的转换规则,详细配置规则

1
2
3
4
5
6
7
8
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};

loaders 是一个强大的模块转换工具,例如能将图片转成 base64,能将 TypeScript 转成 JavaScript 等,参见详细 loaders 列表

plugins

如果你希望对打包流程进行额外的处理,我们可以使用 plugins,下面的例子就是使用 uglify 插件压缩文件。

1
2
3
4
5
6
7
8
9
10
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]

Webpack 内置插件

四、使用

1
2
3
webpack    # 打包
webpack -p # 打包并压缩
webpack -w # 监视文件变动并打包

参考链接:

(完)