版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
今天就来复习下学过的webpack打包的基本配置吧
问题1:为什么需要打包工具
答:我们在html页面中可以通过script标签引入对应的js文件实现js脚本的运行
那如果现在我们写了个.vue .stylus .sass等等文件浏览器无法看懂该咋办呢
这时就需要打包工具(翻译官)翻译成js供浏览器解析了
第一步 新建项目 右键命令行
npm init -y初始化项目并安装所需的依赖
npm install webpack vue vue-loader webpack-cli css-loader vue-template-compiler style-loader --save
第二部 根目录下新建所需的文件
src:主目录文件 webpack.config.js:webpack配置文件
接着随便写点东西进去
App.vue:
index.js:
index.html中挂载app即可
接着在webpack.config.js中配置
const path=require('path')
const VueLoaderPlugin=require('vue-loader/lib/plugin')
const config={
mode:'development',
entry:path.join(__dirname,"src/index.js"),
output:{
filename:"bundle.js",
path:path.join(__dirname,"dist")
},
module:{
rules:[
{
test:/\.vue$/,
use:[
'vue-loader'
]
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
},
plugins:[
new VueLoaderPlugin()
]
}
module.exports=config
就这样我们完成了vue和css文件的打包配置
在webpackconfigjs中新增打包脚本npm run build并执行
编译打包成功!
根目录下多出了dist目录及bundle.js文件
在index.html中引入这个打包好的js文件
页面成功渲染!
注意:若将引入的js写在head标签内会报错:未找到#app元素
分析原因:浏览器自上而下解析html,先执行了这段js代码才再渲染了#app这个dom元素
解决办法:把script放到html页面底部进行解析成功解决!