系列博客链接
- webpack4入门学习笔记(一)
- webpack4入门学习笔记(二)
- webpack4入门学习笔记(三)--Babel的使用
- webpack4入门学习笔记(四)--Tree Shaking与拆分配置文件
代码
笔记的代码是在前面笔记基础上修改的，可以下载代码：github参考或是先看前面的笔记。
html-webpack-plugin的使用
安装
npm i html-webpack-plugin -D
在webpack4.0入门学习笔记(一)中，我们是自己在打包目录下创建index.html对打包后js文件进行引用。
html-webpack-plugin插件可以根据对应的模板在打包的过程中自动生成index.html，并且能够对打包的文件自动引入。
index.html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>模板</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在webpack.config.js的plugins中配置如下
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
entry: {
main: './src/index.js'
},
//打包完成后文件存放位置配置
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
plugins: [
new htmlWebpackPlugin({
template: './index.html'
})
]
}
在终端执行npm run start，打包完成后在dist目录下自动生成index.html文件，并且还自动引入打包后的其他文件。
clean-webpack-plugin的使用
每次打包生成的dist目录，如果改一次代码，都得要删除一次dist目录，这样很麻烦，可以通过clean-webpack-plugin在每次打包的时候自动清空dist目录。
安装
npm i clean-webpack-plugin -D
在webpack.config.js的plugins中配置如下
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
module.exports={
entry: {
main: './src/index.js'
},
//打包完成后文件存放位置配置
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
plugins: [
new htmlWebpackPlugin({
template: './index.html'
}),
new cleanWebpackPlugin()
]
}
entry和output多入口配置
module.exports={
mode: 'development', //development: 开发环境 production：生产环境
entry: {
//多入口
main: './src/index.js',
index: './src/index.js'
},
//打包完成后文件存放位置配置
output: {
//name与entry对象的属性对应
filename: '[name].js', //打包成main.js index.js
path: path.resolve(__dirname,'dist')
}
}
当有多入口的时候，需要修改filename的属性值为'[name].js'，还有其他写法，具体可以查看文档。
配置devtool
devtool决定源代码与打包后的代码之间的映射关系，方便对代码进行调试。
开发环境推荐: cheap-module-eval-source-map
生产环境推荐: cheap-module-source-map
devtool具体内容请查阅：文档：devtool
module.exports={
devtool: 'cheap-module-eval-source-map',
//开发环境推荐: cheap-module-eval-source-map
//生产环境推荐: cheap-module-source-map
}
配置devServer
安装
webpack-dev-server
npm i webpack-dev-server -D
在webpack.config.js中添加以下内容
module.exports={
devServer: {
contentBase: './dist',
// open: true, //自动打开浏览器
// port: 8080, //默认8080
}
}
修改package.json的script
"scripts": {
"start": "webpack-dev-server"
},
执行npm run start后打开浏览器就可以看到效果，当我们修改代码的时候页面就会重新刷新。
有时我们希望页面只更换我们修改的那一部分就可以了，而并不是全部都刷新一遍，所以需要启用webpack的热模块替换功能。
启用webpack的热模块替换功能
添加以下内容：
const webpack=require('webpack')
plugins:[
new webpack.HotModuleReplacementPlugin()
]
devServer: {
hot: true, //启用webpack的热模块替换功能
hotOnly: true //hotOnly不是必须的
}
完整的配置如下：
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
const webpack=require('webpack')
module.exports={
plugins: [
new htmlWebpackPlugin({
template: './index.html'
}),
new cleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
// open: true, //自动打开浏览器
// port: 8080, //默认8080
hot: true, //启用webpack的热模块替换功能
hotOnly: true //devServer.hot在没有页面刷新的情况下启用热模块替换作为构建失败时的后备
}
}
hot:true启用HotModuleReplacementPlugin（HMR）
通过引入样式测试
style.css
body{
background: yellow;
}
div:nth-of-type(odd){
background: cyan;
}
index.js
//通过改style.css样式测试热模块替换效果
import './style.css'
var btn = document.createElement('button')
btn.innerHTML='新增'
document.body.appendChild(btn)
btn.onclick=function(){
var div=document.createElement('div')
div.innerHTML='items'
document.body.appendChild(div)
}
执行npm run start，在浏览器打开以后，修改div的背景颜色，只有改变的地方才发生变化，但是页面并没有刷新。
但是在引入js文件的时候，热模块替换的实现方式有点区别。
js要达到热模块替换的效果，得要if(module.hot){}这一部分代码，否则就算改了代码，页面不刷新，修改的地方在页面上页面变化。
css样式因为css-loader已经实现if(module.hot){}这一部分，所以不需要单独实现这一部分。
index.js
import number from './number'
import add from './add'
add()
number()
if(module.hot){
module.hot.accept('./add.js',function(){
add()
document.getElementById('root').removeChild(document.getElementById('add'))
})
module.hot.accept('./number.js',function(){
number()
document.body.removeChild(document.getElementById('number'))
})
}
add.js
function add(){
var div=document.createElement('div')
div.innerHTML=9
div.setAttribute("id","add")
let root=document.getElementById('root')
root.appendChild(div)
}
export default add
number.js
var number=function(){
var div=document.createElement('div')
div.setAttribute("id","number")
div.innerHTML=1030
document.body.appendChild(div)
}
export default number
网友评论