webpack打包（主要是处理html文件），并启动服务器

迷南。 2021-11-09 08:06 220阅读 0赞

这篇文章主要说一下，如何在webpack打包过程中，处理html文件。

项目目录结构

![20190802195311514.png][]

现在需要，通过webpack打包后，把所有的打包结果放在项目目录下的build目录下，直接启动webpack-dev-server进行运行。

一、安装插件：

1、ExtractTextPlugin：  npm i  extract-text-webpack-plugin --save-dev

2、html-webpack-plugin：npm i  html-webpack-plugin  --save-dev

二、在webpack.config.js中增加如下代码：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        
        …………………………省略部分配置…………………………
    
    	plugins:[   
    		//对html模板进行处理，生成对应的html,引入需要的资源模块
    		new HtmlWebpackPlugin({
    			template:'./index.html',//模板文件，即需要打包和拷贝到build目录下的html文件
    			filename:'index.html',//目标html文件
    			chunks:['useperson'],//对应加载的资源,即html文件需要引入的js模块
    			inject:true//资源加入到底部，把模块引入到html文件的底部
    		})
      ]
    }

三、最终的webpack.config.js的代码

四、执行webpack命令

打包成功

五、执行webpack-dev-server启动服务器。

六、你也可以把webpack和webpack-dev-server一次性执行。需要在package.json里写上如下代码（npm script）：

"scripts": {
        "dev":"webpack && webpack-dev-server",
        …………………………………………
      },

此时，直接在命令行输入：npm run dev 就可以把webpack和webpack-dev-server两个命令一次性执行了。

七、在浏览器中输入： localhost:8080/index.html就可以看到结果了。

八、附：useperson.js和index.html的代码

useperson.js

document.write("hello");

index.html的代码（空的html文件）：