1 基本配置
Webpack 最关键的就是 webpack.config.js 配置文件，架构的好坏都体现在这个配置文件中。
我们在工程所在的根目录，新建一个 webpack.config.js，初始化为：
var config = {};
module.exports = config;
如果 IDE 安装了支持 ES6 的编译插件，那么这里就可以直接使用 ES6 的导出语法：
export default config;
接着，在 package.json 中的 scripts 内，配置 dev 属性，指向刚才新建的 webpack.config.js：
"scripts": {
...
"dev":"webpack-dev-server --open --config webpack.config.js"
}
webpack-dev-server 命令配置属性如下：
| 属性 | 说明 |
|---|---|
| config | webpack-dev-server 配置文件路径。 |
| open | 浏览器打开的页面 URL，默认为 127.0.0.1:8080。如果配置了该选项，那么就会在命令执行成功后，打开浏览器。 |
| host | 浏览器打开的页面 IP 地址。 |
| port | 浏览器打开的页面端口号。 |
2 入口与出口配置
- 入口配置的作用是告知 webpack 从哪里开始寻找依赖，然后 webpack 通过这些依赖执行编译操作。
- 出口配置用于配置编译后的文件存储路径以及文件名称。
我们在项目根目录，新建一个 main.js 作为入口文件，然后在 webpack.config.js 中配置入口与出口。
var config = {
entry: {
main: './main'
},
output: {
//目标输出目录
path: '/public/assets',
//资源文件引用目录
publicPath: '/dist/',
//输出文件的文件名
filename: 'main.js'
}
};
module.exports = config;
- 在 entry 中配置入口，其中的 main，就是我们的配置入口，它指向的就是在 package.json 中配置的 main 所配置的 js 文件（这里是 main.js）。
- 在 output 中配置出口，它有以下这些配置项：
| 属性 | 说明 |
|---|---|
| filename | 输出文件的文件名。 |
| path | 目标输出目录。 |
| publicPath | 资源文件引用目录。如果资源文件托管在 CDN 上，那么可以在此配置 CDN 地址。 |
最后，新建一个 index.html 作为主页面入口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
你好呀
</div>
<script src="dist/main.js"></script>
</body>
</html>
运行命令：
npm run dev
运行成功后，就会自动打开浏览器，进入 http://localhost:8080/。这时可以看到页面输出：
你好呀
修改 main.js 内容：
document.getElementById('app').innerHTML = '欢迎来到 webpack 世界，哈哈'
然后再回到浏览器，可以看到页面被自动刷新咯：
欢迎来到 webpack 世界，哈哈
这是 webpack-dev-server 的热更新特性，它会通过建立 WebSocket 连接来实时响应代码的变化。
main.js 被编译为拥有 387 行代码的脚本：
因为是开发模式，所以编译出的代码较多。
热更新时，控制台也会打印出相关信息：
控制台中想要退出当前命令状态，可以按 ctrl + c，来终止当前操作。
3 Cannot find module ‘webpack-cli/bin/config-yargs’
如果运行 npm run dev，抛出异常：Error: Cannot find module ‘webpack-cli/bin/config-yargs’：
那么使用 npm 安装下 webpack-cli 即可：
npm i webpack-cli -D
i：是 install 的缩写。-D：是 --save-dev 的缩写。
运行结果：
4 配置加载器（Loaders）
在 Webpack 中，每种文件都是一种模块，需要不同的加载器来处理。比如 css 文件就需要 style-loader 和 css-loader。我们使用 NPM 来安装这些加载器：
npm install css-loader --save-dev
npm install style-loader --save-dev
安装成功后，我们接着在 webpack.config.js 中配置 CSS 加载器：
var config = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
entry: {
...
},
output: {
...
}
};
module.exports = config;
我们可以在 module 的 rules 中，指定多个加载器。每个加载器都需要包含以下属性：
| 属性 | 说明 |
|---|---|
| test | 正则表达式 |
| use | 所使用的加载器。可以是字符串或数组；如果是数组，那么它的编译顺序是从后往前。 |
然后在根目录，新建一个 style.css 样式文件，内容为：
#app {
font-size: 24px;
color: #3399ff;
}
最后运行 npm run dev 命令。可以看到页面已被加入样式咯：
Webpack 是利用 JavaScript 来动态创建 <style> 标签，从而写入定义的样式：
这种方式，在实际项目中并不适用。因为一个项目可能有很多样式，如果都放在 JS 中，就会让脚本变得臃肿，影响性能。
5 配置插件（Plugins）
我们可以使用 extract-text-webpack-plugin 插件，把项目中分散的 CSS 样式集中起来，放入 main.css，最后在 index.html 中通过 <link> 来加载它。
安装 extract-text-webpack-plugin 插件。
npm install extract-text-webpack-plugin --save-dev
注意： 如果使用这个命令来安装该插件，那么默认会安装 3.0.2 版本，而这一版与 Webpack4.0+ 不兼容。
如果要安装兼容 Webpack4.0+ 版本的 extract-text-webpack-plugin 插件，请使用以下命令安装：
npm install extract-text-webpack-plugin@next --save-dev
这会安装 [email protected]。
在 webpack.config.js 中，配置好刚刚安装的插件：
//插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({//插件
use: 'css-loader',
fallback: 'style-loader'
})
}
]
},
entry: {
...
},
output: {
...
},
plugins: [//插件
new ExtractTextPlugin('main.css')
]
};
module.exports = config;
再次运行 npm run dev：
页面效果与刚才相同，只不过这时项目样式，已经是通过 <link> 引入的啦O(∩_∩)O~
Webpack 的关键部分是 js 配置，核心概念是入口、出口、加载器与插件。