webpack是一个加载器兼打包工具，它能把各种资源作为模块来使用和处理。

首先，我们新建一个webpack项目文件夹，其中应当包含以下文件：

1. src文件夹，用于存放项目开发过程中的所有代码文件；

2. build文件夹，用来存放src文件通过 webpack 编译后的文件( bundle.js )；

3. public文件夹，用来调试未编译的代码；

4. package.json ，声明模块依赖关系；

5. webpack.config.js ，配置文件，通过module.exports 配置编译前后的文件路径等配置信息：

图1-1 配置组件

功能：通过 webpack 工具将不被浏览器解析的 src 文件编译(打包)为可以被解析的 bundle.js 文件。

注意：在打包之后，若 src 文件发生了更改，bundle.js文件不会自动更新，需要手动输入 webpack 命令重新打包。自动更新的打开方式是在 webpack.config.js 中写入： watch:true，(自动监测打包)，当采用这种方式时，终端不可关闭。

打开命令行，执行操作：

1. 全局安装webpack： cnpm install webpack -g ;

2. 全局安装webpack-cli ： sudo cnpm install webpack-cli -g ；(sudo可以有效预防权限错误的出现)；

3. 配置文件，在build文件夹中新建index.html文件，并引入bundle.js；

4. 启动 webpack ：webpack ；也可以在 package.json 中配置快速启动webpack：“start”:”webpack”；

图2-1 npm + start 指令 == webpack

1. 命令行 cnpm install --save-dev ；解析：cnmp install，会自动查找当前文件夹下的package.json中的所有依赖关系；--save 安装的同时，将信息写入package.json中项目路径；-dev 声明这是开发环境的依赖，而不是代码的依赖。

2. 命令行 webpack-dev-server ：如果提示找不到该命令，可能的原因是node_modules/_webpack-dev-server目录重复，解决方式：cnpm root -g(查看全局的包的安装路径)，找到重复文件并删除就可以了。

3. 配置文件：

图3.1 webpack.config.js 文件的配置

图3.2 devServer的配置选项

4. 在 package.json 中配置快速开启本地服务器的命令： "server": "webpack-dev-server --open"；

图3-3 npm + server 指令 == webpack-dev-server --open

测试完成！

1. 安装依赖命令行：cnpm install style-loader css-loader -save；

2. 配置文件：

module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]},

图4-1 引入css的正则

文章结尾！

简述 webpack