webpack 入门实践（一）

webpack 对于前端开发工程师可能并不陌生。webpack 是前端资源模块化管理和打包工具，可以将许多松散的模块按照依赖和规则打包符合生成环境部署的前端资源。webpack 可以按需加载的模块进行代码分隔，也可以异步加载所需模块。webpack 通过 loader 的代码转换，可以将任何形式的资源都视为模块（CommonJS 模块 AMD 模块 ES6 CSS JSX Json less sass）来加载。

多当下 modern 框架都使用 webpack 作为项目管理和打包工具

目标：掌握 webpack，并可以将他实际应用到项目中。

基本要求：熟悉 javascript 的前端工程师

安装 webpack

创建一个项目（创建一个文件夹，使用 npm init -y 初始化项目）

首先需要全局安装 npm install -g webpack(-g 表示全局安装）

然后在项目下运行 npm install webpack --save-dev 命令来安装 webpack

然后创建一个简单项目以便演示 webpack 是如何管理和打包前端项目，项目结构如下图。

打开 index.html 看一下效果，很简单，单击“隐藏列表”按钮，隐藏列表然后按钮文字变为“显示列表”。再次单击按钮来显示列表。

在 package.json 添加 build 脚本来执行 webpack 第一个参数为入口文件 第二个参数为输出文件。

简单说明一下 dom-loader.js 中提供了通过 document.querySelector 获取的一系列 dom 对象。要使用 webpack 将文件中的 dom 对象 export 给 app.js （以使用），我们需要对文件 dom-loader.js 进行处理，通过 export 关键将这些 dom 向外 export。

然后在 app.js 可以将这些 dom 对象导入来使用

这样我们就在 app.js 和 dom-loader.js 建立了依赖关系。

在终端（cmd）中运行 npm run build 后，在目录下多了 dist/bundle.js(我们在命令行定义出口文件）

写下来在 index.html 中将 webpack 生成的 bundle.js 引入。注释掉原有 dom-loader.js 和 app.js 文件。

如果在 webpack 命令上添加 -p(压缩生成 bundle.js) 以完成部署时所需的 js 文件。

打开通过运行 npm run build:prod 命令生成的 bundle.js 如下图。

打开 chrome 浏览器的开发者工具来查看文件，发现文件都是 0b

我们需要启动服务来启动项目

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于 webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.

devserver 作为 Webpack 配置选项中的一项，具有以下配置选项

contentBase 默认 webpack-dev-server 会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"文件夹下）.

port 设置默认监听端口，如果省略，默认为"8080".

inline 设置为 true，当源文件改变时会自动刷新页面.

historyApiFallback 在开发单页应用时非常有用，它依赖于 HTML5 history API，如果设置为 true，所有的跳转将指向 index.html.

安装 webpack-dev-server

然后在 package.json 文件中在 build 脚本将 webpack 替换为 webpack-dev-server 后运行 npm run build 就会在终端看到下面内容，我们项目部署到服务 localhost 的 8081 端口下。

删除 build:prod 生成的 dist 文件夹后会看到下面错误。是因为 webpack-dev-server 并不是实际生产 bundle.js 而是将 bundle.js 写入内存供 index.html 使用。如果不指定 --output-filename ，index.html 就无法找到 bundle.js 文件。

我们还需要对 build 脚本进行一些修改，

webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js 这样

**修改一下项目结构，将 index.html 从 src 目录中移出到根目录下

开始写 webpack 配置文件

entry：可以指定一个入口起点（或多个入口起点）

output：path 应该是一个绝对路径，这一点与入口文件路径为相对路径不同。因为 webpack 需要在这个路径创建文件并写入内容。

测试一下 build:prod,然后看效果，没问题。

但是运行 build 脚本时，就报错出现问题，因为 webpack-dev-server 需要配置一下 publicPath 这个参数。

大家发现我们在 index.html 以 link 方式引入 css 文件

loader 用于对模块的源代码进行转换 loader 将内联图像转换为 data URL，甚至允许你直接在 JavaScript 模块中 import CSS文件

安装 style-loader css-loader 加载器来将 css 打包到 bundle.js 中。

然后在 app.js 中将其引入

test:一个匹配 Loaders 所处理的文件的拓展名的正则表达式（必须）

rules:允许你在 webpack 配置中指定多个 loader。。

要将 css 文件导入到 javascript 文件中需要使用 css-loader.

注释掉 index.html 中的 link 取消引用的样式，然后运行 npm run build 发现样式丢失了

因为 css-loader 仅是将 css 加载到 javascript 文件中，并没有将样式表写入到 html 中，所以我们看不到效果。需要加载 style-loader 来完成这个任务。

** 注意加载器的顺序

待续