15-webpack学习-使用resolve设置解析路径

最新推荐文章于 2024-02-14 18:30:53 发布

纯黑色山羊

最新推荐文章于 2024-02-14 18:30:53 发布

阅读量1.6k

点赞数

分类专栏： webapck5 文章标签： webpack 学习前端

本文链接：https://blog.youkuaiyun.com/weixin_39876270/article/details/125571515

版权

webapck5 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Webpack的基本配置方法及使用流程，包括项目结构搭建、依赖安装、配置文件编写等核心内容，并提供了实际的打包命令及结果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构

webpackResolve
│  package-lock.json
│  package.json
│  webpack.config.js
└─assets
│   index.css
└─static
│   icon.png
└─src
        index.js

安装依赖

在webpackResolve目录下运行

npm i webpack webpack-cli html-webpack-plugin css-loader style-loader --save-dev

webpack.config.js配置文件

import { resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
module.exports = {
	mode:'development',
	context:resolve(__dirname,'src'),
	entry:'./index.build.js',
	output:{
		filename:'index.js',
		path:resolve(__dirname,'dist')
	},
	module:{
		rules:[
			{
				test:/\.png$/g,
				use:'asset'
			}
		]
	},
	resolve:{
		alias:{
			assets:resolve(__dirname,'assets'),
			static:resolve(__diranme,'static')
		}
	},
	plugins:[new HtmlWebpackPlugin()]
}

index.js

import 'assets/index.css';
import icon from 'static/icon.png';
// 其他业务逻辑

webpack在解析路径的时候对解析的路径进行匹配，
index.js中assets实际上会被解析成path.resolve(__dirname,‘asstes’) + ‘/index.css’,
而同理icon会被解析成path.resolve(__dirname,‘static’)+‘/icon.png’
与在index.js中使用相对路径或绝对路径加载的路径是一致的；
需要注意的是，alias中的属性尾部不要加$ 符，加上$ 符解析的规则则会变成精准匹配，可以参考文档中的规则

打包命令

方式一：在webpackResolve目录下运行

webpack --config ./webapck.config.js

方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpack.config.js"
	}
	...
}

修改保存后，在webpackResolve目录下运行如下命令：

npm run build

打包后的目录

webpackResolve
│  package-lock.json
│  package.json
│  webpack.config.js
├─dist
│      index.build.js
│      index.html
└─assets
│   index.css
└─static
│   icon.png
└─src
        index.js