这篇文章主要说一下,如何在webpack打包过程中,处理html文件。
项目目录结构
现在需要,通过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>