webpack基本用法

蔣以夢

已于 2022-12-22 16:55:41 修改

阅读量929

点赞数 1

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

于 2022-12-04 14:55:35 首次发布

本文链接：https://blog.csdn.net/weixin_43165676/article/details/128083297

版权

一、webpack的基本概念

webpack是一个用于现代JavaScript应用程序的静态模块打包工具；webpack会在内部从一个或多个入口构建一个依赖图（dependency graph），在项目中所需的每一个模块合成以后或多个bundles；bundles均为静态资源用于展示内容
依赖图：每当一个文件依赖另一个文件时，webpack都会将文件视为直接存在依赖关系，这使得webpack可以获得非代码资源（图片、web字体），并将它们作为依赖提供给应用程序

二、 webpack的配置

1、入口entry

指示webpack使用哪个模块来作为构建依赖图的开始；进入入口起点后webpack会找出有哪些模块和库是入口起点依赖的（直接或间接）
默认值：./src/index.js
在webpack.config.js文档中指定入口：

用法1：`entry: string | [string]`

缺点：扩展或调整配置的灵活性不大；“webpack 配置的可扩展” 是指，这些配置可以重复使用，并且可以与其他配置组合使用

 //单个入口
module.exports = {
   
	entry: './src/file.js' 
}
 //多个入口,将一个文件路径数组传递给 entry 属性
module.exports = {
   
	entry: ['./src/file.js','./src/file2.js']
}

用法2：对象语法 `entry: { <entryChunkName> string | [string] } | {}`

module.exports = {
   
	entry: {
   
		app: './src/app.js',
		adminApp: './src/adminApp.js'
	}
}

描述入口对象的属性：

dependOn：当前入口所依赖的入口；它们必须在该入口被加载前加载
filename：指定要输出的文件名称
import：启动时需加载的模块
library：为当前 entry 构建一个 library
runtime：运行时 chunk 的名字；设为 false 可以避免一个新的运行时 chunk
publicPath：当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址

module.exports = {
   
  entry: {
   
    a2: 'dependingfile.js',
    b2: {
   
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

Tips：通过插件生成入口时，可以传递空对象 {} 给 entry

2、出口output

通过配置output选项，告知webpack如何向硬盘写入编译文件；
note：可以存在多个entry起点，但只能指定一个output配置
用法：设置为一个对象，配置filename

module.exports = {
   
  output: {
   
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
};

多个入口时，使用占位符来确保每个文件具有唯一的名称

module.exports = {
   
	mode: 'development', //告知 webpack 使用相应模式的内置优化 production | none(默认值)
	entry: {
   
	    app: './src/app.js',
	    search: './src/search.js',
	  },
	 output: {
   
		 filename: '[name].js',
		  path: __dirname + '/dist',
	 },
};
// 写入到硬盘：./dist/app.js, ./dist/search.js

3、loader

loader用于对模块的源代码进行转换；loader可以使你在import或者load模块时预处理文件。loader可以将文件从不同的语言（如TS）转换成JavaScript语法或者将内联图像转换成dataURL；loader允许在JavaScript模块中import CSS文件

loader特性

loader支持链式调用：链中的每个 loader 会将转换应用在已处理过的资源上；一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader；链中的最后一个 loader，返回 webpack 所期望的 JavaScript
loader 可以是同步的，也可以是异步的
loader 运行在 Node.js 中，并且能够执行任何操作

解析loader

loader 遵循标准模块解析规则。多数情况下，loader 将从模块路径加载（通常是从 npm install, node_modules 进行加载）

（1）css-loader：告诉 webpack 加载 CSS 文件

css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明。
style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。

//先安装相关的loader
npm install --save-dev css-loader style-loader
//webpack.config.js中配置
module.exports = {
   
	module:{
   
		rules:[
			{
   
				test: /\.css$/,
				use: ['style-loader','css-loader'],
				exclude: /node_module/,   // 过滤，排除node_module目录下的文件
				include: /demo/   // 指定匹配文件的范围　　　　　
			}
		]
	}
}

（2）less-loader：告诉 webpack 加载 less 文件

//先安装相关的loader
npm install --save-dev css-loader style-loader less-loader
//webpack.config.js中配置
module.exports = {
   
	module:{
   
		rules:[
			{
   
				test: /\.less$/</