N 天学会 webpack3

分类:webpack

webpack 是目前非常流行的编译打包工具。但是工具虽好,也得会用不是,那咱们争取 N 天学会 webpack3 的基本使用。

环境准备

在开始 webpack 的配置之前,我们需要先做一下环境的准备工作

安装 node

安装过的童鞋请直接跳过

首先我们需要先下载 Node,然后安装就可以了。

运行命令npm -v可以查看版本号。

安装 cnpm

安装过的童鞋请直接跳过

为了后面安装npm模块时节省时间,推荐安装cnpm

只需要一条命令就可以了:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

之后安装模块时可以直接使用下面这条命令:

1
cnpm install [name]

安装 webpack

环境已经准备好了,下面开始安装 webpack 吧。

首先新建一个文件夹,然后在该文件夹下打开命令行工具,输入命令npm init初始化项目,然后一路回车。

接着安装webpack。这里推荐本地安装

本地安装:

1
cnpm i webpack --save-dev

全局安装:

1
cnpm i webpack -g

不推荐全局安装 webpack。这会将您项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。

然后我们将创建以下目录结构:

project

1
2
3
4
5
6
.
├── dist
│ └── index.html
├── package.json
└── src
└── entry.js

dist/indexhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<script src="./bundle.js"></script>
</body>

</html>

src/entry.js

1
console.log('这里是entry文件');

然后运行命令webpack src/entry.js dist/bundle.js

打开dist/index.html文件,查看控制台,是不是能看到输出了呢。

功能配置

是不是很简单呐,下面我们可以添加一个配置文件,来丰富我们的功能。

在根目录新建webpack.config.js,目录结构如下:

1
2
3
4
5
6
7
8
.
├── dist
│ ├── bundle.js
│ └── index.html
├── package.json
├── src
│ └── entry.js
└── webpack.config.js

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const config = {
// 入口
entry: {},
// 出口
output: {},
// 加载器
module: {},
// 插件
plugins: {},
// 服务器
devServer: {},
}

module.exports = config;

entry-入口配置

entry,顾名思义,就是源文件的入口位置。

单个入口(简写)语法

1
2
3
const config = {
entry: "./path/to/my/entry/file.js"
};

通常情况下,单文件入口的写法是如下:

1
2
3
4
5
const config = {
entry: {
main: "./path/to/my/entry/file.js"
}
};

对象语法

1
2
3
4
5
6
const config = {
entry: {
app: ["./src/app.js", "./src/app1.js"],
vendors: "./src/vendors.js"
}
};

output-出口配置

用法

1
2
3
4
5
6
const config = {
output: {
filename: "bundle.js", // 输出文件名
path: "/home/proj/public/assets" // 输出目录
}
};

多个入口起点

1
2
3
4
5
6
7
8
9
10
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}

module-加载器配置

加载器(Loaders)也就是对文件进行处理,对其中的源码进行转化,比如文件中的css需要css-loaderstyle-loader来进行处理

示例

例如,你可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转为 JavaScript。为此,首先安装相对应的 loader:

1
2
npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示 webpack 对每个 .css 使用 css-loader,以及对所有 .ts 文件使用 ts-loader:

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

plugins-插件配置

插件在于解决 Loaders 无法实现的其他事。

不同于 Loaders 使用,插件在使用之前需要通过require来进行引入。

示例

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 HtmlWebpackPlugin = require("html-webpack-plugin"); //通过 npm 安装
const webpack = require("webpack"); //访问内置的插件
const path = require("path");

const config = {
entry: "./path/to/my/entry/file.js",
output: {
filename: "my-first-webpack.bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
use: "babel-loader"
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({ template: "./src/index.html" })
]
};

module.exports = config;

devServer-本地服务器配置

配置

1
2
3
4
5
devServer: {
content bash: path.join(__dirname, "dist"), //解析地址
compress: true, //是否开启服务器压缩
port: 9000 //服务器端口
}