0%

webpack入门

为什么需要构建工具?
主要是为了实现转换ES6语法、转换JSX、CSS前缀补全/预处理器、压缩混淆、图片压缩等功能。

webpack 安装

npm install webpack webpack-cli --save-dev
安装完成后,我们可以通过npx webpack -v来检测webpack是否安装成功。

webpack 核心概念

webpack配置文件

webpack 默认配置文件: webpack.conf.js
可以通过 webpack –config 指定配置文件。

Entry 打包的入口文件

指定打包的入口,告诉webpack应该使用哪个模块,来作为入口文件,webpack会找出哪些模块库是入口的直接或间接依赖。

默认入口是./src/index/js,我们也可以配置来指定一个或多个不同的入口。

简单例子:

1
2
3
module.exports = {
entry: './path/to/my/entry/file.js'
};

这是作为单文件入口时,其实是下面的简写。

1
2
3
4
5
module.exports = {
entry: {
main: './path/to/my/entry/file.js'
}
}

entry的值可以是一个字符串,也可以是一个数组,为数组时,表示有多个主入口,想要多个依赖文件一起注入时,可以用数组。
如果是多页应用的话,也就是多入口的话entry就得写成一个对象。

1
2
3
4
5
6
module.exports = {
entry: {
app: './path/to/my/entry/app.js',
adminApp: './path/to/my/entry/adminApp.js'
}
}

Output 打包的输出

告诉webpack在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。我们也可以来配置。下面是官网给出的例子。

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

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};

这其中涉及到一些Node的知识,__dirname我们可以把它当做node的一个全局变量,它的值为当前目录。我们在最上面引入了path模块,调用了path中的resolve方法。这个方法主要是从左到右拼接出一个绝对路径。注:若字符以 / 开头,不会拼接到前面的路径(因为拼接到此已经是一个绝对路径)
output中的path属性就是输出文件的地址,filename则是输出文件名。
如果entry是多入口配置的话,output就需要通过占位符确保文件名称的唯一。如下

1
2
3
output: {
filename: '[name].js'
}

Loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
我们来配置一下,让webpack支持TypeScript,老规矩先上代码。

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

module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.tsx?$/, use: 'ts-loader' }
]
}
};

在module对象中有一个rules属性,里面定义一个数组,数组中的对象的test属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。这里用正则表示所有ts或者tsx结尾的文件。use属性,表示进行转换时,应该使用哪个 loader,我们这里用的是ts-loader。现在我们就可以让webpack帮我们将TypeScript转为JavaScript。

Plugins 插件配置

loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务,增强webpack。包括:打包优化,资源管理,注入环境变量。
我们如果使用一个插件,就需要require()它,然后把它添加到plugins数组中,如果我们想要多次用一个插件,这时我们就可以用new来创建一个它的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

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

上面插件的作用就是将生成的bundle注入到指定的HTML文件中。

Mode 环境

webpack4新概念,通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

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