webpack基础使用

最新推荐文章于 2025-04-22 17:35:16 发布

Nostalgic~·Xin

最新推荐文章于 2025-04-22 17:35:16 发布

阅读量115

点赞数

本文链接：https://blog.youkuaiyun.com/qq_34455363/article/details/89820836

版权

webpack 的使用步骤：

第一步：初始化 npm init 或者 npm init -y（默认初始化）。
安装： npm i webpack webpack-cli -D(开发安装)

webpack的四个核心概念

1 入口 entry
2 出口打包后输出内容
3 loaders 加载器：对于非JS的静态资源
4 plugins 插件

npm info webpack可以查看所有webpack的版本

卸载当前前或全局的webpack

npx webpack -查看当前webpack版本

在这里插入图片描述

在package.json添加这行，可以npm run build 代替原先的npx webpack

在这里插入图片描述

2.开发服务器的配置

在这里插入图片描述

module.exports = {
  devServer: { //开发服务器配置
    port: 3000, //端口
    progress: true, //进度条
    open: true,   // 自动打开浏览器
    contentBase: './bundle' //起始要打开的文件文件
  },

打包非js文件，用loader

比如打包图片

要先安装相对应的loader: npm i file-loader -D
配置文件中添加 module对象配置
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader
如图：

module: {
rules: [{
test: /.jpg$/, //匹配jpg后缀名文件
use: {
loader: ‘file-loader’ //使用file-loaader
}
}]
},

3.如果要配置文件名字一致如图
在这里插入图片描述

module: {
		rules: [{
			test: /\.(png|jpg|gif)$/, //匹配jpg后缀名文件
			use: {
				loader: 'file-loader', //使用file-loaader
				options: {
					name: '[name]_[hash:5].[ext]' //配置打包后的文件名字后缀名配置
				}
			}
		}]
	},

在这里插入图片描述