webpack-cli打包5分钟入门

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/nightwishh/article/details/95775577

今天就来复习下学过的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页面底部进行解析成功解决！