webpack-cli打包5分钟入门

最新推荐文章于 2025-10-12 13:04:44 发布

原创最新推荐文章于 2025-10-12 13:04:44 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文复习了Webpack打包的基本配置。介绍了在浏览器无法解析.vue、.stylus等文件时，使用Webpack作为打包工具将其翻译成JS。详细说明了项目初始化、依赖安装、文件编写、Webpack配置、打包脚本执行等步骤，还解决了JS引入位置导致的报错问题。

今天就来复习下学过的webpack打包的基本配置吧
打包工具的发展史

问题1：为什么需要打包工具

答：我们在html页面中可以通过script标签引入对应的文件实现脚本的运行
那如果现在我们写了个.vue .stylus .sass等等文件浏览器无法看懂该咋办呢
这时就需要打包工具（翻译官）翻译成供浏览器解析了
在这里插入图片描述

第一步 新建项目 右键命令行

npm init -y初始化项目并安装所需的依赖
npm install webpack vue vue-loader webpack-cli css-loader vue-template-compiler -loader --save

第二部 根目录下新建所需的文件 
src：主目录文件  webpack.config.：webpack配置文件

在这里插入图片描述
接着随便写点东西进去
App.vue:

index.:

index.html中挂载app即可

接着在webpack.config.中配置

const path=require('path')
const VueLoaderPlugin=require('vue-loader/lib/plugin')
const config={
	mode:'development',
	entry:path.join(__dirname,"src/index."),
	output:{
		filename:"bundle.",
		path:path.join(__dirname,"dist")
	},
	module:{
		rules:[
			{
				test:/\.vue$/,
				use:[
					'vue-loader'
				]
			},
			{
				test:/\.css$/,
				use:[
					'-loader',
					'css-loader'
				]
			}
		]
	},
	plugins:[
		new VueLoaderPlugin()
	]
}
module.exports=config

就这样我们完成了vue和css文件的打包配置
在webpackconfig中新增打包脚本npm run build并执行
在这里插入图片描述
编译打包成功！

根目录下多出了dist目录及bundle.文件

在index.html中引入这个打包好的文件

页面成功渲染！

注意：若将引入的写在head标签内会报错：未找到#app元素

分析原因：浏览器自上而下解析html，先执行了这段代码才再渲染了#app这个dom元素
解决办法：把script放到html页面底部进行解析成功解决！