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 作为主页面入口：
Title
你好呀
运行命令：
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 来动态创建