返回

初识webpack配置项

发布时间:2022-11-24 18:30:18 15
# css# html# sass# less

webpack

webpack 是 JS 的静态模块打包器。当 webpack 处理应用程序时,它会将所有这些模块打包成一个或多个文件。

配置webpack

entry

入口起点指示 webpack 打包的起点。进入入口起点后,webpack 会找出模块的每个依赖,随即被处理输出。

entry: 来指定一个入口起点(或多个入口起点),默认值为 ./src;

单入口

  entry: {
    index: './src/pages/index/index.js'
  }

多入口

 entry: {
    index: './src/pages/index/index.js',
    index1: './src/pages/index1/index.js'
  },

output

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。

注意,即使可以存在多个入口起点,但只指定一个输出配置。

output :指定输出,默认值为 ./dist;

path :目标输出目录的绝对路径

filename :用于输出文件的文件名;

  entry: {
    index: './src/pages/index/index.js',
    index1: './src/pages/index1/index.js'
  },
  output: {
    // 输出的目录
    path: resolve('dist'),
    // 输出的文件名
    [name]对应 entry 下个的入口文件名
    filename: 'js/[name].js'
  },

模式

mode :参数为开发模式 development 或 生产模式 production ;

  // 开发模式
  mode: 'development',

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。

loader 的三种使用方式

配置(推荐):在 webpack.config.js 文件中指定 loader。

rules 规则,用于配置loader;

test :用于标识出对应的 loader 转换的文件;

use:表示进行转换时,应该使用的oader;

	  module: {
	    rules: [
	      // css
	      {
	        test: /\.css$/,
	        //loader从后往前执行
	        use: ['style-loader', 'css-loader']
	      },
	      // 图片
	      {
	        test: /\.(png|jpe?g|gif|svg)$/,
	        loader: 'url-loader',
	        options: {
	          // 小于 10K 的图片转成 base64 编码的 dataURL 字符串写到代码中
	          limit: 10000,
	          // 其他的图片转移到
	          name: 'images/[name].[ext]',
	          esModule: false
	        }
	      },
	      // 字体文件
	      {
	        test: /\.(woff2?|eot|ttf|otf)$/,
	        loader: 'url-loader',
	        options: {
	          limit: 10000,
	          name: 'fonts/[name].[ext]'
	        }
	      }
	    ]
	  },

内联:在每个 import 语句中显式指定 loader。

可以在 import 语句或任何等效于 "import" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

	import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI:在 shell 命令中指定它们。

	webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

plugins

插件目的在于解决 loader 无法实现的其他事。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。

使用

使用插件,需要 require() 把它添加到 plugins 数组中;

多数插件可以通过选项(option)自定义;

使用 new 操作符来创建它的一个实例;

	plugins: [
	    // 自动将依赖注入 html 模板,并输出最终的 html 文件到目标文件夹
	    new HtmlWebpackPlugin({
	      filename: 'index.html',
	      template: './src/pages/index/index.art'
	    })
	  ]

模块解析

模块(modules)

在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块。

每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

webpack 模块

对比 Node.js 模块,webpack 模块能够以各种方式表达它们的依赖关系。

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
样式(url(...))或 HTML 文件()中的图片链接(image url)

模块解析

resolver 是一个库(library),用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块,然后被后者引用。

webpack 中的解析规则

使用 enhanced-resolve,webpack 能够解析三种文件路径:

绝对路径

import "/home/me/file";
import "C:\\Users\\me\\file";

相对路径

import "../src/file1";
import "./file2";

模块路径

import "module";
import "module/lib/file";

结语

本文到此结束

如果大家还有什么其他想法,欢迎在评论区交流!

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线
下一篇
css复合选择器和子元素选择器 2022-11-24 18:03:20