1. clean-webpack-plugin插件
老铁，我又有新问题了，我们上面的每次操作，都要先删除dist这个文件夹，这个操作还需要我做，我感觉很不爽，如果电脑自己删它，我的鼠标右键就可以减少一定的磨损了，这该怎么做呢？ 没错，还是插件，这时我们需要
clean-webpack-plugin，注意，还是没有s，没有s，没有s，三遍收~~
1. 首先，安装这个插件
PS E:\goodStudy\webpackStudy> npm i clean-webpack-plugin -D
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 23 packages from 65 contributors and audited 5424 packages in 10.33s
found 0 vulnerabilities
2. 安装上这个插件之后，我们需要在
webpack.config.js文件中引入这个模块，如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js',
main2: './src/main2.js'
},
output: {//出口配置
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
chunks:['main2'],
filename:'index2.html',
hash: true,
title: 'hello world',
template: './src/index2.html'
})
]
}
注意：
clean-webpack-plugin模块更新之后，需要通过解构的方式来引入这个模块，即：{CleanWebpackPlugin} = require('clean-webpack-plugin')，否则会报错，还有现在实例的传参方式也变了，原先可以传一个数组，现在最好什么也不传。
2. webpack-dev-server插件
老铁，你这上面的操作都好像是静态的页面之间瞎操作的，能不能在服务器环境中操作呢？ 可以，，这时，我们又需要一个模块了，webpack-dev-server，我们webpack的五大功能之一就是devServer，没错就是它
1. 废话不多说，先安装这个模块
PS E:\goodStudy\webpackStudy> npm i webpack-dev-server -D
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 149 packages from 107 contributors and audited 8933 packages in 34.342s
found 0 vulnerabilities
2.这个模块不需要引入，我们直接在devServer中配置就可以了，如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js',
main2: './src/main2.js'
},
output: {//出口配置
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
chunks:['main2'],
filename:'index2.html',
hash: true,
title: 'hello world',
template: './src/index2.html'
})
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'), //
host: 'localhost',
port: 8080,
open: true,
hot: true
}
}
其中，contentBase设置的是服务器访问的路径，这里要是绝对路径，host设置的是主机名或者IP地址，port设置的是端口号， open表式自动打开浏览器，hot热更新
3. 我看别人都是npm run dev，我们也可以设置一下在package.json文件当中：
{
"name": "webpackStudy",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode development",
"dev": "webpack-dev-server --mode development" // 服务端打开
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.8.0"
}
}
4. 命令行运行，npm run dev，开启服务
PS E:\goodStudy\webpackStudy> npm run dev
> [email protected] dev E:\goodStudy\webpackStudy
> webpack-dev-server --mode development
i ｢wds｣: Project is running at http://localhost:8090/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from E:\goodStudy\webpackStudy\dist
i ｢wdm｣: Hash: d833e62420336b08c5fb
Version: webpack 4.39.2
Time: 825ms
Built at: 2019-08-21 10:39:52 AM
Asset Size Chunks Chunk Names
index.html 483 bytes [emitted]
main.bundle.js 360 KiB main [emitted] main
main2.bundle.js 360 KiB main2 [emitted] main2
Entrypoint main = main.bundle.js
Entrypoint main2 = main2.bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8090 ./src/main.js 40 bytes {main} [built]
[1] multi (webpack)-dev-server/client?http://localhost:8090 ./src/main2.js 40 bytes {main2} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} {main2} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} {main2} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} {main2} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8090] (webpack)-dev-server/client?http://localhost:8090 4.29 KiB {main} {main2} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} {main2} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} {main2} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.85 KiB {main} {main2} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} {main2} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} {main2} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} {main2} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} {main2} [built]
[./src/main.js] 76 bytes {main} [built]
[./src/main2.js] 49 bytes {main2} [built]
+ 20 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 607 bytes {0} [built]
[./node_modules/lodash/lodash.js] 528 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Compiled successfully.
世界如此美好，我却如此暴躁，这样不好、不好