19 插件的使用
07_webpack打包其他资源_13.jpg
20 CleanWebpackPlugin
07_webpack打包其他资源_14.jpg
const path = require("path");
//loader的话直接写loader的名字，就可以去包里面加载loader，但是插件的话，需要手动进行导入
const { CleanWebpackPlugin} = require("clean-webpack-plugin");
//require("clean-webpack-plugin")导出的是一个对象，我们需要使用这个对象中的一个叫做ClaenWebpackPlugin的类，
//这个是对象的解构
module.exports = {
entry: "./src/main.js",
output: {
path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
filename: "bundle.js"
},
module: {
.....
},
plugins:[
//一个个插件对象
new CleanWebpackPlugin()
]
}
21 HtmlWebpackPlugin
07_webpack打包其他资源_15.jpg
1. 自动生成index.html
07_webpack打包其他资源_16.jpg
就算删除了目录底下的Index.html,使用了这个插件之后，是会自动在build里面生成index.html的。
而且还自动引用了bundle.js文件
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="js/bundle.js"></script></head><body></body></html>
const path = require("path");
//loader的话直接写loader，就可以去包里面加载loader，但是插件的话，需要手动进行导入
const { CleanWebpackPlugin} = require("clean-webpack-plugin");
//require("clean-webpack-plugin")导出的是一个对象，我们需要使用这个对象中的一个叫做ClaenWebpackPlugin的类，
//这个是对象的解构
//不用做结构，因为require("html-webpack-plugin")它导出的就是一个类
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
filename: "js/bundle.js"
},
module: {
....
},
plugins:[
//一个个插件对象
new CleanWebpackPlugin(),
new HtmlWebpackPlugin()
]
}
2. 自定义HTML模板
07_webpack打包其他资源_17.jpg
把vue-cli里面的public文件夹里面的index.html文件作为模板，可以设置响应的参数
先把下面这句话注释掉，然后npm run build
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!DOCTYPE html>
<html lang="">
<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">
--》注释 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
然后webpack.config.js里面的pugins设置成如下
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:"webpack练习",
template:"./public/index.html"
})
]
在进行npm run build
设置的html模板就会被进行打包
3. 自定义模板数据填充
如果不注释
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
的话，进行npm run build就会报错，说找不到 BASE_URL ，这时候就要进行如下的操作
07_webpack打包其他资源_18.jpg
07_webpack打包其他资源_19.jpg
07_webpack打包其他资源_20.jpg
如果设置BSASE_URL = "abc", 那么他会在上下文里面找另一个叫做abc的变量，也就是在同一个webpack.config.js的文件里面找，如果在const {DefinePlugin} = require('webpack')下面一行定义const abc = "123", 就会找到abc，然后找到他的值123，把他赋值给BSASE_URL ， 我们这时候就直接给BSASE_URL 一个字符串“./”
const {DefinePlugin} = require('webpack')
plugins:[
//一个个插件对象
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html",
title:"hahaha"
}),
new DefinePlugin({
BASE_URL : "'./'"
})
]
22. CopyWebpackPlugin
07_webpack打包其他资源_21.jpg
const path = require("path");
//loader的话直接写loader，就可以去包里面加载loader，但是插件的话，需要手动进行导入
const { CleanWebpackPlugin} = require("clean-webpack-plugin");
//require("clean-webpack-plugin")导出的是一个对象，我们需要使用这个对象中的一个叫做ClaenWebpackPlugin的类，
//这个是对象的解构
//不用做结构，因为require("html-webpack-plugin")它导出的就是一个类
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {DefinePlugin} = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
filename: "js/bundle.js"
},
module: {
...
},
plugins:[
//一个个插件对象
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html",
title:"hahaha"
}),
new DefinePlugin({
BASE_URL : "'./'"
}),
new CopyWebpackPlugin({
patterns:[
{
from: "public",
// to: "./",
globOptions:{
ignore:[
"**/index.html"
]
}
}
]
})
]
}
23 Mode配置
给element.js里面写console.log(wer)，wer没有定义，会报错。然后代开开发工具，发现报错信息是：
bundle.js:1 Uncaught ReferenceError: wer is not defined
at bundle.js:1:58048
at bundle.js:1:58115
at bundle.js:1:58119
打开bundle文件之后，发现什么都看不懂。这时候我们需要设置mode和devtool
07_webpack打包其他资源_22.jpg
在开发阶段，希望打包的bundle.js能看懂，不要压缩，可以设置mode为"development", 只设置mode的话，还是看不懂，里面有很多eval函数包裹着我们实际写的代码，我们还要设置devtool，他的默认值是eval。设置devtool:"source-map",之后，打包好的build文件夹的js文件夹里面有两个js文件，一个是bundle.js和 bundle.js.map文件。 bundle.js.map会把bundle.js里面看不懂的代码，映射到打包前真实的js文件里面，这样哪里出错的时候，就直接能定位到(element.js:25:1)而不是bundle.js(1)
Uncaught ReferenceError: wer is not defined
at ./src/js/element.js (element.js:25:1)
at __webpack_require__ (bootstrap:19:1)
at nonce:1:1
at bundle.js:1142:3
at bundle.js:1144:12
module.exports = {
//设置模式
//development 开发阶段，会设置development
//production 准备打包上线的时候，设置production
mode:"development",
//设置source-map，建立js映射文件，方便调试代码和错误
devtool:"source-map",
entry: "./src/main.js",
output: {
path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
filename: "js/bundle.js"
},
07_webpack打包其他资源_23.jpg
如上图，设置development模式，就代表下面的红字的设置自动添加了，不用配了，就自动配好了
总结：我们准备上线的时候会这只mode为production。开发的时候设置为development模式。
设置source-map的目的是建立js映射文件，方便调试代码和错误。
网友评论