介绍
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack的官方中文文档（https://www.webpackjs.com/）确实做的很好，概念简单易懂。概念的东西就不说了，接下来我就简单总结下webpack项目的搭建过程。
具体过程
- 初始化项目文件目录，生成 package.json 文件
cd ./webpack03
cnpm init
image.png
image.png
- 调整文件目录，如下：
image.png
其中，src 是公共资源文件，/src/index.js 是入口文件，dist 是打包后的文件目录。webpack.config.js 是 webpack 的配置文件。
- index.js
简单实现index.js文件：
function component(){
let div = document.createElement('div');
div.innerHTML = 'Hello webpack';
return div;
}
document.body.appendChild(component());
- 配置 webpack.config.js
主要是设置入口文件，输出文件，还有模式。具体如下：
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
- 配置 package.json
添加一下语句，可直接执行 cnpm run build 进行打包。
image.png
- index.html
在 index.html 中引进输出文件 bundle.js
<script src="bundle.js"></script>
- 执行打包命令
cnpm run build
image.png
接下来，在浏览器中打开 index.html 文件，不出意外的话，可以看到效果。
image.png
以上就是一个用 webpack 简单配置的过程。当然，还有静态资源，模块，插件等。
loader
以 style-loader， css-loader 为例子。
- 本地安装模块
cnpm install --save-dev style-loader css-loader
image.png
- 在 webpack.config.js 中添加 rules
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
}
-
style.css
在 src 下新建 style.css 文件，并编写规则：
.hello {
font-size: 30px;
font-weight: bold;
color: seagreen;
}
- 在 index.js 中引进并使用 style.css
image.png
- 重新运行 cnpm run build
重新再浏览器中查看 index.html，不出意外的话，会看到以下的效果：
image.png
- 简单总结 loader 就是：npm 进行安装，webpack.config.js 中引进并设置 rules。
服务器 webpack-dev-server
像我们上面这么配置，每次都要执行 cnpm run build，岂不是很麻烦。有一个好东西 webpack-dev-server，可以监控我们代码的改动。
- 安装
npm install --save-dev webpack-dev-server
- 修改 webpack.config.js
添加以下语句：
devServer: {
contentBase: './dist'
}
image.png
- 修改 package.json
添加以下语句：
"start": "webpack-dev-server --open"
image.png
- 执行 cnpm start
不出意外的话，执行完语句之后会自动跳转到目标页面 index.html，之后对项目的更改会实时更新。
