简述 webpack

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

            测试完成！

四、CSS样式加载

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

            2. 配置文件：

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

图4-1 引入css的正则

           文章结尾！