webpack 每次打包公用vendor 每次hash都会变化，有办法解决吗

Posted 2023-04-27

不太明白你的意思
首次使用Webpack, 用CLI, 即Command Line Interface

→ 确认是否安装了NodeJS
npm -v
→ 安装 Webpack
npm install webpack -g
→ 创建一个简单的网站
.....webpacktest/
..........app.js
..........index.html
→ 导航到webpacktest所在文件夹
→ 对app.js文件使用webpack
webpack ./app.js bundle.js
→ 我们看到在webpacktest目录下多了一个bundle.js文件
→ 现在，可以在index.html中引用bundle.js文件，而不是app.js文件

■ 在项目中添加配置文件

→ 在项目根目录下创建名称为webpack.config.js文件
当设置好webpack.config.js文件后，每次我们导航到项目，只要使用webpack这一个命令就可以使用各项功能了。
module.exports =
entry: "./app.js",
output:
filename: "bundle.js"


→ 命令行来到需要Webpack的网站下
→ 直接输入webpack命令
webpack

■ 启用Webpack观察者模式

当webpack.config.js的配置发生变化，如果每次都要手动输入webpack命令来生成js文件的话，显得相对麻烦一些。Webpack为我们提供了观察者模式，启用后，任何的webpack.config.js中的变化将接受观察，自动生成最终的js文件。

→ 命令行来到需要Webpack的网站下
→ 启用观察者模式
webpack --watch
→ 在webpack.config.js中添加watch字段，并设置成true
module.exports =
entry: "./app.js",
output:
filename: "bundle.js"
,
watch: true

→ 这样，每次修改保存webpack.config.js中引用文件，bundle.js的文件会自动更新。

■ 安装启用Webpack DevServer

→ 导航到目标网站目录
→ 输入npm命令安装Webpack DevServer
npm install webpack-dev-server -g
→ 输入webpack-dev-server命令
webpack-dev-server
→ 看到大致如下内容
http://localhost:8080/webpack-dev-server
webpack result is served from /
cotent is served from D:\\...
Hash:...
Version:webpack1.12.4
Time:94ms
...
webpack: bundle is now VALID.
→ 在浏览器中输入：http://localhost:8080/webpack-dev-server/
同时显示app.js文件中console.log和document.write的内容。
→ 修改webpack.config.js中依赖的文件并保存，浏览器中的内容就会自动更新
→ 如果不想显示console.log内容呢？
→ 在浏览器中输入：http://localhost:8080/
→ 此时，再修改webpack.config.js中依赖的文件并保存，浏览器的内容却不会更新？
→ 再次回到命令行，加入一个inline的flag
webpack-dev-server --inline
→ 此时，如果修改webpack.config.js中依赖的文件并保存，浏览器中的内容就会自动更新了☺

■ Bundling多个文件

→ 在项目下再添加一个login.js文件
console.log(\'login loaded\');
→ app.js中引用login.js文件
require(\'./login\');
document.write("Welcome to Big Hair Concerts!!Baby");
console.log(\'App loaded\');
→ 在浏览器中输入：http://localhost:8080/
可以看到变化。
→ 在项目下再添加一个utils.js文件
console.log(\'logging from the utils.js file...\');
→ 来到webpack.config.js下配置如下：
module.exports =
entry: ["./utils","./app.js"],
output:
filename: "bundle.js"
,
watch: true

→ 命令行导航到当前项目下
→ 重新启用Webpack DevServer
webpack-dev-server
→ 在http://localhost:8080/中体现了相应的变化 参考技术A 开进按F进去安全模式 开始-运行-MSconfig- 启动去除所有勾选 重启
如果进不去安全模式 请重新安装系统

使用vue-cli构建 webpack打包工具时，生产环境下，每次build时，删除dist目录，并重新生成，以防dist目录文件越来越多。

　　首先，需要使用webpack的插件CleanWebpackPlugin，安装命令如下：

　　npm install --save-dev clean-webpack-plugin

　　其次，需要在生产环境提供的文件：build/webpack.prod.conf.js的plugins节点下添加如下代码：

　 new CleanWebpackPlugin(

　　[‘dist‘],　 //匹配删除的文件

　　{　　

　　　　root：path.resolve(__dirname,‘../‘)     //根目录

　　　　verbose：true，                                 //是否启用控制台输出信息

　　　　dry:          false,                                   //设置为false,启用删除文件

　　}

 ),