服务器安装程序时html不可写入,自行配置前端开发环境二(生成html与开启开发服务器)...

我们接着配置我们的开发环境，上一次我们已经配置了最基本的打包配置，但是上次我们进行打包的是js文件，webpack可以编译js文件，但是对于其他的html，css，img等文件则需要加入另外的插件与loader包。我们今天讲的是如何打包编译html文件及使用我们的开发服务器。

使用html插件(html-webpack-plugin)

关于webpack的插件我这里就不去解释了，需要的小伙伴可以去官网查看。

由于webpack默认打包的文件是js文件，我们在打包html文件时需要引入插件，我们这里使用的是html-webpack-plguin插件来生成打包我们的html文件。

下载

npm install -save-dev html-webpack-plugin

配置

我们来修改一下我们的webpack.common.js文件，在里面加入html-webpack-plugin插件的配置,现在我们的webpack.common.js文件的配置是这样的：

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

let config = {

mode: process.env.NODE_ENV === "development" ? "development" : "production",

entry: path.resolve(__dirname, "../src/main.js"),

output: {

path: path.resolve(__dirname, "../dist"),

filename: "bundle[hash].js",

},

plugins: [

new HtmlWebpackPlugin({

filename: "index.html",

template: "./src/index.html"

}),

],

};

module.exports = config;

然后我们来谈谈html-webpack-plugin的配置选项都有哪些，用途有哪些；

Name

Type

Default

Description

title

{String}

Webpack App

用于生成的HTML文档的标题

filename

{String}

'index.html'

将HTML写入的文件。默认为index.html。您可以在这里指定一个子目录(如：assets/admin.html)

template

{String}

``

webpack模板的相对或绝对路径。默认情况下，它将使用(src/index.ejs如果存在)。请参阅文档以了解详细信息

templateContent

{string\

Function\

false}

false

可用于代替template提供内联模板-请阅读“ 编写自己的模板”部分

templateParameters

{Boolean\

Object\

Function}

``

允许覆盖模板中使用的参数-请参见示例

inject

{Boolean\

String}

true

true \

\

'head' \

\

'body' \

\

false将所有资产注入给定template或templateContent。传递时，true或'body'所有javascript资源都将放置在body元素的底部。'head'会将脚本放置在head元素中-请参见inject：false示例

scriptLoading

{'blocking'\

'defer'}

'blocking'

现代浏览器支持非阻塞javascript加载('defer')，以提高页面启动性能。

favicon

{String}

``

将给定的图标图标路径添加到输出HTML

meta

{Object}

{}

允许注入meta-tags。例如meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}

base

{Object\

String\

false}

false

注入base标签。例如base: "https://example.com/path/page.html

minify

{Boolean\

Object}

如果mode是'production'为true，否则false

控制是否以及以什么方式最小化输出。有关更多详细信息，请参见下面的缩小。

hash

{Boolean}

false

如果是true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。这对于清除缓存很有用

cache

{Boolean}

true

仅在文件被更改时发出文件

showErrors

{Boolean}

true

将错误详细信息写入HTML页面

chunks

{?}

?

只允许您添加一些块(例如，仅单元测试块)

chunksSortMode

{String\

Function}

auto

允许控制在将块包含到HTML中之前应如何对其进行排序。允许值为'none' \

'auto' \

'dependency' \

'manual' \

{Function}

excludeChunks

{Array.}

``

允许您跳过一些块(例如，不添加单元测试块)

xhtml

{Boolean}

false

如果true将link标签呈现为自动关闭(符合XHTML)

⚠️这里需要特别解释几个配置，title属性是配置我们生成的html文件的title标签中的内容，但是你如果配置了template属性就会使用你配置的模版文件中的title；inject属性是配置注入的js文件位置，默认是true，也可以使用字符串"body"或"head"，当为true或者为字符串"body"时会将打包后的js文件注入到生成的html文件中的body里，当值为"head"时则注入到head中。

现在我们就可以执行我们的打包命令了，npm run start之后我们就可以在dist目录下找到我们的index.html文件，html文件的body中已经注入了我们打包后的js文件

使用webpack-dev-server开发服务器

安装webpack-dev-server

npm install -save-dev webpack-dev-server

配置

在我们的webpack.dev.js文件中添加配置，现在我们的配置是这样的：

const path = require("path");

const common = require("./webpack.common");

const merge = require("webpack-merge");

module.exports = merge(common, {

devServer: {

contentBase: path.join(__dirname, "../dist"),

compress: true,

port: 3000,

open: true

},

});

⚠️webpack-dev-server中默认打开了hot配置，就是热更新模块，这可以让我们在修改文件的时候不需要手动刷新页面，可以做到即改即看；contentBase属性是给webpack-dev-server声明一个监听目录，可以监听改目录下的文件变化；compress是启用gzip压缩；port就很明显的是端口号了；open在启动webpack-dev-server后打开浏览器；这里还有个默认的配置选项是host，即主机地址，默认是localhost,如果你需要在局域网中查看你的网页，你可以修改配置为"0.0.0.0"即可。

另外⚠️这里可能会有小伙伴会觉得奇怪，contentBase是给开发服务器定了一个监视的目录地址，但是我们执行完命令后并没有这个目录，这是因为webpack-dev-server是将打包后的代码运行在内存中的，实行上并不存在该目录。

开启开发服务器

现在我们已经安装与配置好开发服务器，我们来配置npm命令启动它，修改我们的package.json文件的scripts,添加一个dev配置并使用我们的webpack开发环境配置

"dev": "webpack-dev-server --config ./config/webpack.dev.js",

开启

npm run dev

等待服务器开启后，就会自动打开我们的浏览器，现在我们就可以使用html文件与开启我们的开发服务器进行开发了。