webpack-dev-server ，卸载和安装指定版本的cmd命令，自动生成html，清理【诗书画唱】
WEBPACK自动构建和搭建服务器
前言：
边学习边记录操作的步骤，学习笔记，常常记录操作，常常记录功能实现的例子。
我们在index.html文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希并输出多个 bundle，手动地对 index.html 文件进行管理会变得困难起来。然而，可以通过一些插件，使这个过程更容易操控。
目录：
操作
功能实现例子记录1：点击按钮后控制台打印出“Hello world”
功能实现例子记录2：安装和使用html-webpack-plugin， clean-webpack-plugin，webpack-dev-server 实现用node serv.js等的cmd命令，启动服务器后dist文件夹的内容自动被删除，但访问http://127.0.0.1:8888/的路径还是可以访问index.html
如果单纯想使用npm run build的cmd命令在dist文件夹下生成index.html和打包成的js文件，那么应该这么写
如果在此基础上想dist的文件被“删除”，“清空”，”隐藏“后，输入
http://127.0.0.1:8888/的范围路径还可以访问index.html,实现界面跳转
等等，那么可以这样
Vscode中整理代码的方法
学习笔记
老师的代码
除了package.json，其余的代码都我写的几乎一样（因为老师安装的模块比我多，package.json中显示了安装了哪些的模块）
操作
功能实现例子记录1：点击按钮后控制台打印出“Hello world”
npm uninstall --save-dev webpack（个人理解：作用是卸载webpack）
npm uninstall --save-dev webpack-cli（个人理解：作用是卸载webpack-cli脚手架）
npm install --save-dev webpack@5.31.2
（个人理解：作用是安装5.31.2版本的webpack）
npm install --save-dev webpack-cli@3.3.12
（个人理解：作用是安装3.3.12版本的webpack-cli脚手架）
npm install --save-dev webpack-dev-server@3.11.2
（个人理解：作用是安装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>
<!-- 会自动生成到dist目录下的打包文件是bundle.js ：-->
<script src="bundle.js"></script>
<!-- 引入src中的被打包文件index.js
（其中src中的css文件等等通过import等等导入到了index.js文件中，
一起被打包）：
如果不使用引入和自动在dist目录下生成的打包文件，就会出现没有效果等等的情况-->
<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 = '点我';
//给按钮绑定点击事件，执行print.js中提供的函数
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
功能实现例子记录2：安装和使用html-webpack-plugin， clean-webpack-plugin，webpack-dev-server 实现用node serv.js等的cmd命令，启动服务器后dist文件夹的内容自动被删除，但访问
http://127.0.0.1:8888/的路径还是可以访问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>
<!-- 会自动生成到dist目录下的打包文件是bundle.js ：-->
<script src="./print.bundle.js"></script>
<script src="./app.bundle.js"></script>
<!-- 引入src中的被打包文件index.js
（其中src中的css文件等等通过import等等导入到了index.js文件中，
一起被打包）：
如果不使用引入和自动在dist目录下生成的打包文件，就会出现没有效果等等的情况-->
<!-- <script src="../src/index.js"></script>
但是 package.json文件中的entry: {
app: './src/index.js',
print: './src/print.js'
}已经指定了被打包的文件有哪些，能让index.html文件中可以不用再写引入被打包的文件了。-->
</body>
</html>
npm install --save-dev html-webpack-plugin
（个人对这个cmd命令的理解：这个cmd命令可以安装index.html页面自动生成工具）
npm install clean-webpack-plugin --save-dev
（个人对这个cmd命令的理解：这个cmd命令可以安装在每次构建前清理 /dist 文件夹，可以清理掉之前生成的文件的清理dist文件夹插件）
npm install --save-dev webpack-dev-server
（个人对这个cmd命令的理解：这个cmd命令可以安装能够实时重新加载(live reloading)的简单的 web 服务器）
npm install --save-dev express webpack-dev-middleware
（个人对这个cmd命令的理解：
安装express 和 webpack-dev-middleware，webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。
）
如果单纯想使用npm run build的cmd命令在dist文件夹下生成index.html和打包成的js文件，那么应该这么写：
//src/index.js
//引入src/print.js
//import只能写在所有代码的最前面
import pt from './print';
let btn = document.createElement('button');
btn.innerHTML = '点我';
//给按钮绑定点击事件，执行print.js中提供的函数
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/的范围路径还可以访问index.html,实现界面跳转
等等，那么可以这样：
<!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>登录页面</h1>
</body>
</html>
//serv.js
const express = require('express');
const webpack = require('webpack');
const mw = require('webpack-dev-middleware');
const app = express();
//获取项目的配置内容
const config = require('./webpack.config');
//获取编译工具
const compiler = webpack(config);
//设置中间件
app.use(mw(compiler,{
publicPath: config.output.publicPath
}));
//http://127.0.0.1:8888/login
app.get('/login',function(req,res){
//跳转到views/login.html
res.sendfile(__dirname + '/views/login.html');
});
app.listen(8888,function(){
console.log('服务器启动成功');
});
//http://127.0.0.1:8888/
//webpack.config.js
//path模块是用来操作文件路径的核心模块
//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
//解构取出对象中的CleanWebpackPlugin属性存放在CleanWebpackPlugin变量中
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
//每个js文件都有一个module对象，存放模块需要导出的值和函数
module.exports = {
//./表示当前webpack.config.js文件所在的文件夹
/*个人解析：entry指定项目构建的文件有哪些,
entry的属性名app, print就是打包后的文件名的一部分，
[name]中name的值就是entry的属性名:*/
entry: {
app: './src/index.js',
print: './src/print.js'
},
//错误提示插件
devtool: 'inline-source-map',
//在端口号8080下创建一个web服务
//可执行的文件都在dist文件夹下
devServer: {
contentBase: './dist'
},
plugins: [
new HWP({
title: '输出管理插件'
}),
//清理插件
new CleanWebpackPlugin()
],
output: {
//指定打包以后生成的文件名是什么，比如[app].bundle.js
filename: '[name].bundle.js',
//__dirname指的是当前的根目录
//指定打包以后生成的文件存放的位置
path: path.resolve(__dirname,'dist'),
//打包生成的文件的前缀
publicPath: '/'
},
module: {
rules: [
{
//对于项目中以.css结尾的所有的文件都使用
//style-loader和css-loader进行解析
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
//对项目中以.png,.gif,.jpg,.svg结尾的文件都使用
//file-loader进行解析
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>登录页面</h1>
</body>
</html>
node serv.js
就算dist目录中的index.html和打包的js文件自动没有了，但访问http://127.0.0.1:8888/后
仍然有这些文件的运行效果：
学习笔记
配置文件webpack.config.js
自动构建webpack项目
老师的代码
除了package.json，其余的代码都我写的几乎一样（因为老师安装的模块比我多，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": ""
}
