webpack-dev-server搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要让浏览器自动刷新显示我们修改后的结果。

不过它是一个单独的模块，在webpack中使用之前先安装它

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

    contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，这里写./dist

    port：端口号

    inline：页面实时刷新

    historyApiFallback：在SPA页面中，依赖HTML5的history模式

webpack.config.js文件配置修改如下：

在package.json中配置脚本

运行npm run dev遇到的问题： Error: Cannot find module 'webpack-cli/bin/config-yargs'

原因是： webpack-cli的新版本对webpack-dev-server版本的不兼容

解决方案： 降低webpack-cli的版本为 "^3.3.12"

step1: 创建一个项目录

注意：项目名一般 不要带中文

step2: 创建 package.json

或者：

step4: 处理第三方文件

html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:

总结：webpack可以做两件事情况：

step5: 配置入口文件和出口文件

每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包：

step6: 实现自动打包编译

每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack

在 package.json 文件中配置命令：

在终端中执行命令：

注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。

改变文件引用路径：

执行上述命令后终端会有类似信息输出：

【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具将项目托管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问

【Content not from webpack is served from C:\Users\yfb\Desktop\前端学习案例4.27\wabpack\Demo_1\src】——不是通过webpack打包的文件，则是以src为根目录访问。

该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_modules平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。

因为项目托管到新服务器，现在应该访问的是 该服务器 下的项目，文件引用路径也要改变:

step7: 自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）

在 package.json 中配置命令，并重启服务器：

step8: 使用 html-webpack-plugin 插件

使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。

安装 html-webpack-plugin 插件：

在 webpack.config.js 配置文件中配置插件：

html-webpack-plugin 插件的两个作用：

step9: 处理样式文件

html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。

处理css文件：

处理less样式文件

通过 http://[devServer.host]:[devServer.port]/webpack-dev-server 查看 devServer 提供的所有资源列表。

通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。

如果提供了 devMiddleware.publicPath ，则通过 http://[devServer.host]:[devServer.port]/[devMiddleware.publicPath]/资源名称 来访问对应的资源，但是通过插件生成的 html 和 css 文件当中所有资源引用的路径仍然使用的是 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 。因此需要保证 output.publicPath 与 devMiddleware.publicPath 一致。

static 设置的是静态资源目录的位置，不是打包生成的文件的存放位置，devServer 打包生成的文件存放在内存中，不存放到硬盘目录。

static.publicPath 设置的是访问静态资源的路径，不是访问打包生成的资源的路径，打包生成的资源路径通过 output.publicPath 访问，静态资源路径访问的是直接存放在静态目录中的静态资源。

配置文件

initial chunk 的文件名

占位符：

non-initial chunk 的文件名，占位符参考 output.filename

设置为 true ，每次打包之前清理 output.path 目录中的所有内容，可以替代 CleanWebpackPlugin 插件。

定义资源存放的位置，例如根据以上的配置文件打包之后生成如下文件：

将 1 2 3 生成的资源都存放到 output.path 目录， dist/app.bundle.js dist/css/app.min.css dist/images/1.jpg

部署的时候，将该目录下的内容复制到服务器对应的目录即可。

定义资源访问的路径

资源访问路径 = output.publicPath + 资源名称

output.publicPath 可以是绝对路径、相对于服务的路径、相对于页面的路径。 不管是哪种路径，都要以 / 结尾

HtmlWebpackPlugin 生成的 index.html 文件：

MiniCssExtractPlugin 生成的 css 文件：

HtmlWebpackPlugin 生成的 index.html 文件：

MiniCssExtractPlugin 生成的 css 文件：

HtmlWebpackPlugin 生成的 index.html 文件：

MiniCssExtractPlugin 生成的 css 文件：

不管通过哪种路径设置 output.publicPath ，都只是影响 HtmlWebpackPlugin 和 MiniCssExtractPlugin 生成的文件中引用其他资源的路径。具体能不能根据资源路径访问到相应的资源，还得正确的部署 output.path 目录到服务器。

在开发模式下，devServer 自动开启一个开发服务器，并且将所有打包生成的资源存储到内存当中，然后通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。 这时候 output.publicPath 应该设置为相对服务的路径，例如 / 。

如果你的页面希望在其他不同路径中找到资源文件，则可以通过 devServer 配置中的 devMiddleware.publicPath 选项进行修改。

在生产模式下，推荐将 output.publicPath 设置为绝对路径，然后将 output.path 目录部署与绝对路径对应的服务器中。

配置文件

module.rules 是匹配规则数组，数组中的每一项为一条匹配规则，以下称为 rule。每条 rule 包括匹配条件和匹配结果。

对于依赖图中的每个模块路径，都按照 module.rules 中的 rule 依次进行匹配。如果模块路径满足某个 rule 的匹配条件，则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?

匹配条件包括 test include exclude 选项，每个选项为一个匹配条件，选项的值可以是：

如果某个 rule 同时有多个匹配条件选项，则模块路径必须同时满足所有的匹配条件，才会对模块应用匹配结果。test 和 include 具有相同的作用，都是必须匹配选项。exclude 是必不匹配选项（优先于 test 和 include）。

最佳实践：

以上配置文件的第二条 rule，如果某个模块不在 ./src/node_modules/ 和 ./src/libs/ 目录下，并且在 ./src/ 目录下，并且模块名以 .js 结尾，则满足该条 rule 的匹配条件。

package.json

webpack.common.js

webpack.prod.js

webpack.dev.js

---