自行配置前端开发环境二(生成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.<string>}	``	允许您跳过一些块（例如，不添加单元测试块）
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文件与开启我们的开发服务器进行开发了。

github地址：https://github.com/hjyyang/jon-cli