一、什么是webpack?
webpack是模块打包工具
二、webpack安装
版本:4.6.0
npm install webpack --save-dev
npm install webpack-cli --save-dev
三、配置文件webpack.config.js
publiPath的默认地址为当前目录。
module.exports = {
entry:{
main:"./main.js"
},
output:{
path:path.join(__dirname,"./dist"), //webpack打包后文件的输出目录
publicpath:"./dist" //引用资源的目录,公共路径
filename:"main.js"
},
注意,此时/指的是根目录。也就是所在的盘。
四、index.html引入的文件
引入的js、css文件为path路径中的文件。
五、对于webpack打包css、js、图片的路径问题
此时,如果,js、css中有引入图片、字体等文件。资源的引用路径就会是publicPath+fillname。
1.如果是绝对路径,图片路径就不会存在问题。(因为路径是绝对问题)
publicPath:“/vue-SPA/dist/”。/是指根目录(盘)。
在css、js中资源的引用都不会有问题。(一定会找到资源)
2.如果publicPath是相对路径,图片路径就会存在问题。(因为路径是绝对问题)
publicPath:“/vue-SPA/dist/设置。此时的图片引用地址为./dist/filename.jpg。。由于是相对地址,引用图片的地址 发生了错误。