在上一次的笔记中，介绍了在package.json说明书里面有一个”scripts”脚本，然后如何在脚本中配置内容。由于每一次输入参数是一件很麻烦的事情，因此webpack为我们提供了第二种方式，即配置文件的方式。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象
1. 配置文件方式的过程
创建一个webpack.config.js（需要写在当前项目的根目录下，怕大家不理解，给大家看看如下图所示）
一个文件是一个依赖图，多个文件是多个依赖图。entry是其上下文的入口文件，从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。在这里我只介绍一个文件的，想要了解多个文件的可以去网上搜索相关知识，然后自己动手敲一下。在上一次的笔记分享中，我给大家说过默认的出口文件是：dist/main.js，下面我们就来修改为自己想要的打包名。在webpack.config.js文件中写入:
1
2
3
4
5
6
7
8
9
10
| module.exports = {
entry: "./src/js/index.js",
output: {
path: __dirname + "/dist",
filename: "bundle.[chunkhash].js"
}
}
|
此时执行指令:npm run prod得到如下图所示的文件：
2. loader进行转换
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！（上面一段话摘抄官网中对loader的定义）
说了那么一大段关于loader的定义，我简单的给大家总结一句话就是转换成JS看得懂的语言。下面给大家简单介绍一下loader如何配置。
loader的使用方式有三种：在配置文件webpack.config.js中配置、通过命令行参数方式、通过内联使用，在这里我只给大家演示在配置文件webpack.config.js中配置的情况，如果想了解另外两个使用方式，可以去官网进行一个查看。
比如我们想告诉webpack加载css文件和TypeScript文件，告诉它该转换为JavaScript。先在终端执行下载指令：
npm install css-loader ts-loader --save-dev。当下载完毕之后，我们再在webpack.config.js文件中进行一个配置：
1
2
3
4
5
6
7
8
9
10
| module.exports = {
module:{
rules: [
{test: /\.css$/, use: 'css-loader'},
{test: /\.ts$/, use: 'ts-loader'}
]
}
}
}
|
3. loader链
比如此时我有一个sass文件（文件后缀是scss），我想把它转换为JavaScript看得懂的语言，此时我就可以考虑loader链来解决。先在终端执行指令：
下载sass-loader:
npm install sass-loader node-sass --save-dev
下载css-loader和style-loader:
npm install css-loader style-loader --save-dev
当下载完成之后，在webpack.config.js文件中配置文件:
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
module:{
rules: [
{test: /\.scss$/, use: ["style-loader","css-loader","sass-loader"]}
]
}
}
}
|
注意：loader链写的时候是从左向右写的，但是执行的时候是从右往左执行的。
4. Plugins插件
Plugins本质就是构造函数，loader做不了的事情，都可以用Plugins来做。（webpack中80%的系统都是由插件完成的）
比如我们下载一个html-webpack-plugin插件（它的作用是会生成index.html文件，然后把css文件和js文件自动的插入进去），在终端执行命令：npm install html-webpack-plugin –save-dev,当下载完成之后，我们可以在src文件下面添加一个index.html文件，给大家看看我添加的index.html文件的位置，如下图所示：
然后在webpack.config.js文件中进行一个配置：
1
2
3
4
5
6
7
8
9
| const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html"
})
]
}
|
然后在src文件下的index.html文件中可以写自己想要的内容，我在这里就随便举一个例子了，index.html文件中写入：
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>hello，我是index模板</div>
</body>
</html>
|
然后在终端执行指令：npm run prod，然后在当前文件下打包出dist文件，dist文件下面有两个文件，如下图所示：
在dist文件下面的index.html文件中得到如下所示的内容：
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>hello，我是index模板</div>
<script type="text/javascript" src="main.17c127af8d7bbc1338ba.js"></script></body>
</html>
|
关于plugins的插件使用还有许多，有兴趣的小伙伴可以去官网查看，然后自己进行一个练习。
5. 开一个服务器
在终端执行指令：npm install webpack-dev-server –save-dev，当下载完之后，在package.json文件中的”scripts”脚本进行一个配置，如下图所示：
此时在终端执行指令:npm run dev，此时执行该命令之后，我们会发现并没有dist文件夹，因为它把它们打包到内存中去了。
关于webpack还有许多的内容可以进行一个扩展，在这里我只是总结了一些日常需要且基础的一部分，有兴趣的话可以百度搜索或者看官网。
