webpack4+学习笔记:5. 热更新 与 copy-webpack-plugin 插件
热更新 与 copy-webpack-plugin 插件
一、热更新
修改js代码时禁止整个页面强制刷新
1. webpack.config.js 配置
let CopyWebpackPlugin = require("copy-webpack-plugin");
devServer: {
hot: true
}
plugins: [
new webpack.HotModuleReplacementPlugin()
]
2. 在入口页面中写入如下代码块
if(module.hot) {
module.hot.accept();
}
二、copy-webpack-plugin 插件
1. 安装
npm install copy-webpack-plugin -D
查看 package.json ,显示安装成功:
2. 在src中添加文件夹存放要靠被的文档
3. webpack.config.js 配置
let CopyWebpackPlugin = require("copy-webpack-plugin");
plugins: [
new CopyWebpackPlugin([
{
from: "./src/doc",
to : "public"
}
]),
]
注意:CopyWebpackPlugin 必须是数组形式,否则会报错
4. 执行打包命令
npm run build
命令串爽快输出结果以及项目目录显示,拷贝成功:
更多 copy-webpack-plugin 插件了解,请戳我
这一篇就到此结束啦~~~
下一篇进入 webpack 中CSS样式的处理~~~