原创
webpack打包（主要是处理html文件），并启动服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
</div>
<!--一个博主专栏付费入口-->
<!--一个博主专栏付费入口结束-->
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-4a3473df85.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-4a3473df85.css">
<div class="htmledit_views" id="content_views">
<p>这篇文章主要说一下，如何在webpack打包过程中，处理html文件。</p>
项目目录结构
现在需要，通过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的代码
-
const path =
require(
'path');
-
const webpack =
require(
'webpack')
-
const ExtractTextPlugin =
require(
"extract-text-webpack-plugin");
-
const HtmlWebpackPlugin =
require(
'html-webpack-plugin');
-
-
module.exports = {
-
mode:
"development",
-
//入口文件（要打包的文件）
-
entry:{
-
"useperson":
"./useperson.js"
-
},
-
-
//出口文件（打包的结果）
-
output:{
-
"path":__dirname+
"/build/",
-
"filename":
"[name].bundle.js"
-
},
-
//启动服务
-
devServer:{
-
host:
"localhost",
-
port:
"8080",
-
contentBase:__dirname+
"/build"
-
},
-
module: {
-
//加载器配置
-
rules: [
-
{
-
test:
/\.js$/,
-
loader:
'babel-loader',
-
exclude:
/node_modules/,
//排除掉node_modules下的js文件，即不解析这个文件夹下的js文件
-
query: {
-
presets: [
'latest']
//按照最新的ES6语法规则去转换，可以把这个写在预设(.babelrc)文件里
-
}
-
},
-
-
]
-
},
-
plugins:[
-
//对html模板进行处理，生成对应的html,引入需要的资源模块
-
new HtmlWebpackPlugin({
-
template:
'./index.html',
//模板文件，即需要打包和拷贝到build目录下的html文件
-
filename:
'index.html',
//目标html文件
-
chunks:[
'useperson'],
//对应加载的资源,html文件需要引入的js模块
-
inject:
true
//资源加入到底部，把模块引入到html文件的底部
-
})
-
]
-
}
四、执行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文件）：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>
</title>
-
</head>
-
<body>
-
-
</body>
-
</html>
扫一扫
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
