webpack-dev-server ，卸載和安裝指定版本的cmd命令，自動(dòng)生成html，清理【詩(shī)書畫唱】
WEBPACK自動(dòng)構(gòu)建和搭建服務(wù)器
前言：
邊學(xué)習(xí)邊記錄操作的步驟，學(xué)習(xí)筆記，常常記錄操作，常常記錄功能實(shí)現(xiàn)的例子。
我們?cè)趇ndex.html文件中手動(dòng)引入所有資源，然而隨著應(yīng)用程序增長(zhǎng)，并且一旦開(kāi)始對(duì)文件名使用哈希并輸出多個(gè) bundle，手動(dòng)地對(duì) index.html 文件進(jìn)行管理會(huì)變得困難起來(lái)。然而，可以通過(guò)一些插件，使這個(gè)過(guò)程更容易操控。
目錄：
操作
功能實(shí)現(xiàn)例子記錄1：點(diǎn)擊按鈕后控制臺(tái)打印出“Hello world”
功能實(shí)現(xiàn)例子記錄2：安裝和使用html-webpack-plugin， clean-webpack-plugin，webpack-dev-server 實(shí)現(xiàn)用node serv.js等的cmd命令，啟動(dòng)服務(wù)器后dist文件夾的內(nèi)容自動(dòng)被刪除，但訪問(wèn)http://127.0.0.1:8888/的路徑還是可以訪問(wèn)index.html
如果單純想使用npm run build的cmd命令在dist文件夾下生成index.html和打包成的js文件，那么應(yīng)該這么寫
如果在此基礎(chǔ)上想dist的文件被“刪除”，“清空”，”隱藏“后，輸入
http://127.0.0.1:8888/的范圍路徑還可以訪問(wèn)index.html,實(shí)現(xiàn)界面跳轉(zhuǎn)
等等，那么可以這樣
Vscode中整理代碼的方法
學(xué)習(xí)筆記
老師的代碼
除了package.json，其余的代碼都我寫的幾乎一樣（因?yàn)槔蠋煱惭b的模塊比我多，package.json中顯示了安裝了哪些的模塊）
操作
功能實(shí)現(xiàn)例子記錄1：點(diǎn)擊按鈕后控制臺(tái)打印出“Hello world”
npm?uninstall?--save-dev?webpack（個(gè)人理解：作用是卸載webpack）
npm?uninstall?--save-dev?webpack-cli（個(gè)人理解：作用是卸載webpack-cli腳手架）
npm?install?--save-dev?webpack@5.31.2
（個(gè)人理解：作用是安裝5.31.2版本的webpack）
npm?install?--save-dev?webpack-cli@3.3.12
（個(gè)人理解：作用是安裝3.3.12版本的webpack-cli腳手架）
npm?install?--save-dev?webpack-dev-server@3.11.2
（個(gè)人理解：作用是安裝3.3.12版本的webpack-dev-server）
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
</head>
<body>
????<!--?會(huì)自動(dòng)生成到dist目錄下的打包文件是bundle.js?：-->
????<script?src="bundle.js"></script>
????<!--?引入src中的被打包文件index.js
?（其中src中的css文件等等通過(guò)import等等導(dǎo)入到了index.js文件中，
????????一起被打包）：
????
????如果不使用引入和自動(dòng)在dist目錄下生成的打包文件，就會(huì)出現(xiàn)沒(méi)有效果等等的情況-->
????<script?src="../src/index.js"></script>?
</body>
</html>
//src/index.js
//引入src/print.js
//import只能寫在所有代碼的最前面
import?pt?from?'./print';
let?btn?=?document.createElement('button');
btn.innerHTML?=?'點(diǎn)我';
//給按鈕綁定點(diǎn)擊事件，執(zhí)行print.js中提供的函數(shù)
btn.onclick?=?pt;
document.body.appendChild(btn);
//src/print.js
export?default?function?printHello(){
????console.log('Hello?world');
}
{
??"name":?"webpack_homework_day2",
??"version":?"1.0.0",
??"description":?"",
??"private":?true,
??"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
????"build":?"webpack"
??},
??"keywords":?[],
??"author":?"",
??"license":?"ISC",
??"devDependencies":?{
????"css-loader":?"^5.2.4",
????"file-loader":?"^6.2.0",
????"style-loader":?"^2.0.0",
????"url-loader":?"^4.1.1",
????"webpack":?"^5.31.2",
????"webpack-cli":?"^3.3.12",
????"webpack-dev-server":?"^3.11.2"
??}
}
?npm run build
功能實(shí)現(xiàn)例子記錄2：安裝和使用html-webpack-plugin，?clean-webpack-plugin，webpack-dev-server 實(shí)現(xiàn)用node serv.js等的cmd命令，啟動(dòng)服務(wù)器后dist文件夾的內(nèi)容自動(dòng)被刪除，但訪問(wèn)
http://127.0.0.1:8888/的路徑還是可以訪問(wèn)index.html
使用cmd命令安裝必備的模塊：
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
</head>
<body>
????<!--?會(huì)自動(dòng)生成到dist目錄下的打包文件是bundle.js?：-->
????<script?src="./print.bundle.js"></script>
????<script?src="./app.bundle.js"></script>?
????<!--?引入src中的被打包文件index.js
?（其中src中的css文件等等通過(guò)import等等導(dǎo)入到了index.js文件中，
????????一起被打包）：
????
????如果不使用引入和自動(dòng)在dist目錄下生成的打包文件，就會(huì)出現(xiàn)沒(méi)有效果等等的情況-->
????<!--?<script?src="../src/index.js"></script>?
????
????但是??package.json文件中的entry:?{
????????app:?'./src/index.js',
????????print:?'./src/print.js'
????}已經(jīng)指定了被打包的文件有哪些，能讓index.html文件中可以不用再寫引入被打包的文件了。-->
</body>
</html>
npm install --save-dev html-webpack-plugin
（個(gè)人對(duì)這個(gè)cmd命令的理解：這個(gè)cmd命令可以安裝index.html頁(yè)面自動(dòng)生成工具）
npm install clean-webpack-plugin --save-dev
（個(gè)人對(duì)這個(gè)cmd命令的理解：這個(gè)cmd命令可以安裝在每次構(gòu)建前清理 /dist 文件夾，可以清理掉之前生成的文件的清理dist文件夾插件）
npm install --save-dev webpack-dev-server
（個(gè)人對(duì)這個(gè)cmd命令的理解：這個(gè)cmd命令可以安裝能夠?qū)崟r(shí)重新加載(live reloading)的簡(jiǎn)單的 web 服務(wù)器）
npm install --save-dev express webpack-dev-middleware
（個(gè)人對(duì)這個(gè)cmd命令的理解：
安裝express 和 webpack-dev-middleware，webpack-dev-middleware 是一個(gè)容器(wrapper)，它可以把 webpack 處理后的文件傳遞給一個(gè)服務(wù)器(server)。
）
如果單純想使用npm run build的cmd命令在dist文件夾下生成index.html和打包成的js文件，那么應(yīng)該這么寫：
//src/index.js
//引入src/print.js
//import只能寫在所有代碼的最前面
import?pt?from?'./print';
let?btn?=?document.createElement('button');
btn.innerHTML?=?'點(diǎn)我';
//給按鈕綁定點(diǎn)擊事件，執(zhí)行print.js中提供的函數(shù)
btn.onclick?=?pt;
document.body.appendChild(btn);
//src/print.js
export?default?function?printHello(){
????console.log('Hello?world');
}
npm run build
如果在此教程上想dist的文件被“刪除”，“清空”，”隱藏“后，輸入
http://127.0.0.1:8888/的范圍路徑還可以訪問(wèn)index.html,實(shí)現(xiàn)界面跳轉(zhuǎn)
等等，那么可以這樣：
<!DOCTYPE?html>
<html?lang="en">
????<head>
????????<meta?charset="UTF-8">
????????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????????<title>Document</title>
????</head>
????<body>
????????<h1>登錄頁(yè)面</h1>
????</body>
</html>
//serv.js
const?express?=?require('express');
const?webpack?=?require('webpack');
const?mw?=?require('webpack-dev-middleware');
const?app?=?express();
//獲取項(xiàng)目的配置內(nèi)容
const?config?=?require('./webpack.config');
//獲取編譯工具
const?compiler?=?webpack(config);
//設(shè)置中間件
app.use(mw(compiler,{
????publicPath:?config.output.publicPath
}));
//http://127.0.0.1:8888/login
app.get('/login',function(req,res){
????//跳轉(zhuǎn)到views/login.html
????res.sendfile(__dirname?+?'/views/login.html');
});
app.listen(8888,function(){
????console.log('服務(wù)器啟動(dòng)成功');
});
//http://127.0.0.1:8888/
//webpack.config.js
//path模塊是用來(lái)操作文件路徑的核心模塊
//npm?install?path?--save
const?path?=?require('path');
//npm?install?--save-dev?html-webpack-plugin
const?HWP?=?require('html-webpack-plugin');
//npm?install?clean-webpack-plugin?--save-dev
//解構(gòu)取出對(duì)象中的CleanWebpackPlugin屬性存放在CleanWebpackPlugin變量中
const?{CleanWebpackPlugin}?=?require('clean-webpack-plugin');
//每個(gè)js文件都有一個(gè)module對(duì)象，存放模塊需要導(dǎo)出的值和函數(shù)
module.exports?=?{
????//./表示當(dāng)前webpack.config.js文件所在的文件夾
????/*個(gè)人解析：entry指定項(xiàng)目構(gòu)建的文件有哪些,?
????entry的屬性名app,?print就是打包后的文件名的一部分，
????[name]中name的值就是entry的屬性名:*/
????entry:?{
????????app:?'./src/index.js',
????????print:?'./src/print.js'
????},
????//錯(cuò)誤提示插件
????devtool:?'inline-source-map',
????//在端口號(hào)8080下創(chuàng)建一個(gè)web服務(wù)
????//可執(zhí)行的文件都在dist文件夾下
????devServer:?{
????????contentBase:?'./dist'
????},
????plugins:?[
????????new?HWP({
????????????title:?'輸出管理插件'
????????}),
????????//清理插件
????????new?CleanWebpackPlugin()
????],
????output:?{
????????//指定打包以后生成的文件名是什么，比如[app].bundle.js
????????filename:?'[name].bundle.js',
????????//__dirname指的是當(dāng)前的根目錄
????????//指定打包以后生成的文件存放的位置
????????path:?path.resolve(__dirname,'dist'),
????????//打包生成的文件的前綴
????????publicPath:?'/'
????},
????module:?{
????????rules:?[
????????????{
????????????????//對(duì)于項(xiàng)目中以.css結(jié)尾的所有的文件都使用
????????????????//style-loader和css-loader進(jìn)行解析
????????????????test:?/\.css$/,
????????????????use:?['style-loader','css-loader']
????????????},
????????????{
????????????????//對(duì)項(xiàng)目中以.png,.gif,.jpg,.svg結(jié)尾的文件都使用
????????????????//file-loader進(jìn)行解析
????????????????test:?/\.(png|gif|jpg|svg)$/,
????????????????use:?['file-loader']
????????????}
????????]
????}
};
{
??"name":?"webpack_homework_day2",
??"version":?"1.0.0",
??"description":?"",
??"private":?true,
??"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
????"build":?"webpack",
????"server":?"node?serv.js"
??},
??"keywords":?[],
??"author":?"",
??"license":?"ISC",
??"devDependencies":?{
????"clean-webpack-plugin":?"^4.0.0-alpha.0",
????"css-loader":?"^5.2.4",
????"file-loader":?"^6.2.0",
????"html-webpack-plugin":?"^5.3.1",
????"style-loader":?"^2.0.0",
????"url-loader":?"^4.1.1",
????"webpack":?"^5.31.2",
????"webpack-cli":?"^3.3.12",
????"webpack-dev-server":?"^3.11.2"
??}
}
<!DOCTYPE?html>
<html?lang="en">
????<head>
????????<meta?charset="UTF-8">
????????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????????<title>Document</title>
????</head>
????<body>
????????<h1>登錄頁(yè)面</h1>
????</body>
</html>
node serv.js
就算dist目錄中的index.html和打包的js文件自動(dòng)沒(méi)有了，但訪問(wèn)http://127.0.0.1:8888/后
仍然有這些文件的運(yùn)行效果：
學(xué)習(xí)筆記
配置文件webpack.config.js
自動(dòng)構(gòu)建webpack項(xiàng)目
老師的代碼
除了package.json，其余的代碼都我寫的幾乎一樣（因?yàn)槔蠋煱惭b的模塊比我多，package.json中顯示了安裝了哪些的模塊）
{
??"devDependencies":?{
????"clean-webpack-plugin":?"*",
????"css-loader":?"^5.2.4",
????"express":?"^4.17.1",
????"file-loader":?"^6.2.0",
????"html-webpack-plugin":?"^5.3.1",
????"style-loader":?"^2.0.0",
????"url-loader":?"^4.1.1",
????"webpack":?"^5.31.2",
????"webpack-cli":?"^4.6.0",
????"webpack-dev-middleware":?"^4.1.0",
????"webpack-dev-server":?"^3.11.2"
??},
??"name":?"j190802",
??"version":?"1.0.0",
??"private":?true,
??"dependencies":?{
????"acorn":?"^8.2.1",
????"ajv":?"^6.12.6",
????"ajv-keywords":?"^3.5.2",
????"ansi-colors":?"^4.1.1",
????"browserslist":?"^4.16.5",
????"buffer-from":?"^1.1.1",
????"caniuse-lite":?"^1.0.30001214",
????"chrome-trace-event":?"^1.0.3",
????"clone-deep":?"^4.0.1",
????"colorette":?"^1.2.2",
????"commander":?"^2.20.3",
????"cross-spawn":?"^7.0.3",
????"electron-to-chromium":?"^1.3.720",
????"enhanced-resolve":?"^5.8.0",
????"enquirer":?"^2.3.6",
????"envinfo":?"^7.8.1",
????"es-module-lexer":?"^0.4.1",
????"escalade":?"^3.1.1",
????"eslint-scope":?"^5.1.1",
????"esrecurse":?"^4.3.0",
????"estraverse":?"^4.3.0",
????"events":?"^3.3.0",
????"execa":?"^5.0.0",
????"fast-deep-equal":?"^3.1.3",
????"fast-json-stable-stringify":?"^2.1.0",
????"fastest-levenshtein":?"^1.0.12",
????"find-up":?"^4.1.0",
????"function-bind":?"^1.1.1",
????"get-stream":?"^6.0.1",
????"glob-to-regexp":?"^0.4.1",
????"graceful-fs":?"^4.2.6",
????"has":?"^1.0.3",
????"has-flag":?"^4.0.0",
????"human-signals":?"^2.1.0",
????"import-local":?"^3.0.2",
????"interpret":?"^2.2.0",
????"is-core-module":?"^2.3.0",
????"is-plain-object":?"^2.0.4",
????"is-stream":?"^2.0.0",
????"isexe":?"^2.0.0",
????"isobject":?"^3.0.1",
????"jest-worker":?"^26.6.2",
????"json-parse-better-errors":?"^1.0.2",
????"json-schema-traverse":?"^0.4.1",
????"kind-of":?"^6.0.3",
????"loader-runner":?"^4.2.0",
????"locate-path":?"^5.0.0",
????"merge-stream":?"^2.0.0",
????"mime-db":?"^1.47.0",
????"mime-types":?"^2.1.30",
????"mimic-fn":?"^2.1.0",
????"neo-async":?"^2.6.2",
????"node-releases":?"^1.1.71",
????"npm-run-path":?"^4.0.1",
????"onetime":?"^5.1.2",
????"p-limit":?"^3.1.0",
????"p-locate":?"^4.1.0",
????"p-try":?"^2.2.0",
????"path":?"^0.12.7",
????"path-exists":?"^4.0.0",
????"path-key":?"^3.1.1",
????"path-parse":?"^1.0.6",
????"pkg-dir":?"^4.2.0",
????"punycode":?"^2.1.1",
????"randombytes":?"^2.1.0",
????"rechoir":?"^0.7.0",
????"resolve":?"^1.20.0",
????"resolve-cwd":?"^3.0.0",
????"resolve-from":?"^5.0.0",
????"safe-buffer":?"^5.2.1",
????"schema-utils":?"^3.0.0",
????"serialize-javascript":?"^5.0.1",
????"shallow-clone":?"^3.0.1",
????"shebang-command":?"^2.0.0",
????"shebang-regex":?"^3.0.0",
????"signal-exit":?"^3.0.3",
????"source-list-map":?"^2.0.1",
????"source-map":?"^0.6.1",
????"source-map-support":?"^0.5.19",
????"strip-final-newline":?"^2.0.0",
????"supports-color":?"^7.2.0",
????"tapable":?"^2.2.0",
????"terser":?"^5.6.1",
????"terser-webpack-plugin":?"^5.1.1",
????"uri-js":?"^4.4.1",
????"v8-compile-cache":?"^2.3.0",
????"watchpack":?"^2.1.1",
????"webpack-merge":?"^5.7.3",
????"webpack-sources":?"^2.2.0",
????"which":?"^2.0.2",
????"wildcard":?"^2.0.0",
????"yocto-queue":?"^0.1.0"
??},
??"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
????"build":?"webpack",
????"start":?"webpack-dev-server?--open",
????"server":?"node?serv.js"
??},
??"keywords":?[],
??"author":?"",
??"license":?"ISC",
??"description":?""
}
