当前位置: 首页 > 最新文章 > 正文

Webpack 配置入门(1)——entry、output

webpack 是被广泛使用的开源前端打包工具。yarn init -yyarn add -D webpack webpack-cli创建一个 webpack.config.js 文件,用于配置打包的细节。module.exports = { // 配置内容}entryentry 用于指定项目的入口文件。通过依赖树,webpack 可以将用到的文件打包成到一个文件。outputoutput 用于

admin

webpack 是被广泛使用的开源前端打包工具。yarn init -yyarn add -D webpack webpack-cli创建一个 webpack.config.js 文件,用于配置打包的细节。module.exports = { // 配置内容}entryentry 用于指定项目的入口文件。通过依赖树,webpack 可以将用到的文件打包成到一个文件。outputoutput 用于设置生成文件的命名、路径等配置。通过 path,我们可以指定打包文件所在的根目录,需要特别注意的是,这 path 必须为绝对路径。path 如果不提供,根目录就会设置为当前目录下的 dist 文件夹。output.filenameoutput 的 filename 的作用不仅于此,我们简单展开说说。给文件名添加哈希值我们可以提供在文件名的末尾加一个可能会改变哈希值。此外还有其他哈希的写法,这里就不展开了。前提是 entry 需要为对象的形式。如果格式不对,filename 值会被认为无效,使用回默认的 main.js。

大家好,我是前端西瓜哥,我们来聊聊 webpack 如何进行配置。

webpack 是被广泛使用的开源前端打包工具。

webpack 支持模块化开发,任何类型的文件都会被当作模块,通过加载引入的方式形成依赖树,生成一个或几个文件。

我们用 yarn 初始化一个前端项目,然后安装 webpack 和 webpack-cli 依赖。

yarn init -yyarn add -D webpack webpack-cli

创建一个 webpack.config.js 文件,用于配置打包的细节。

虽然我们写前端代码时用的模块化方案通常是 ES6 的 module,因为它面向未来,但 webpack 本质还是一个 nodejs 项目,所以我们在 webpack.config.js 中还是需要用 commonjs 的模块写法。

module.exports = {  // 配置内容}

entry

entry 用于指定项目的入口文件。如果没有设置,会使用默认值 ./src/index.js

entry: './src/app.js',

选定入口文件后,webpack 就会以该文件为起点,找到导入到入口文件的模块,以及导入到模块的模块,不断递归,最后构造成一个依赖树。

通过依赖树,webpack 可以将用到的文件打包成到一个文件。

不在依赖树中的文件不会被打包进去,以前刀耕火种的时代,都是在 HTML 下直接引入 js 文件,没管理好可能会引入多余依赖,webpack 解决了这个问题。

entry 也可以是对象或数组形式,这样就会有多个入口文件,但最终会被打包成一个文件。

output

output 用于设置生成文件的命名、路径等配置。如果不配置,会生成到 ./dist/main.js 文件下。

const path = require('path');module.exports = {  // ...  output: {    path: path.resolve(__dirname, 'build'),    filename: 'path/to/app.js',  },  // ...}

output 必须为一个对象。

通过 path,我们可以指定打包文件所在的根目录,需要特别注意的是,这 path 必须为绝对路径。path 如果不提供,根目录就会设置为当前目录下的 dist 文件夹。

filename 为打包出来的文件名,可以加一些子路径。如果不提供 filename,会被设置为 main.js

Webpack 配置入门(1)——entry、output

output.filename

output 的 filename 的作用不仅于此,我们简单展开说说。

给文件名添加哈希值

我们可以提供在文件名的末尾加一个可能会改变哈希值。

哈希值有什么用呢?答案是解决浏览器缓存问题,如果改动后文件还保持原来的名字,浏览器可能还会使用旧的缓存。

我们在构建的时候,如果触发特定条件,比如文件内容变化,就提供一个新的哈希值,就可以解决浏览器缓存的问题。

output: {  filename: 'app-[contenthash].js',},// 生成文件名:app-5fd7e75fbe3ff0440f59.js

filename.output 使用了 [contenthash],表示应用内容哈希,生成长度为 20 的哈希串。

如果你觉得太长了,可以通过 [contenthash:8] 的写法控制哈希串长度。

此外还有其他哈希的写法,这里就不展开了。

生成多个打包文件

const path = require('path')module.exports = {  entry: {    preIndex: './src/preIndex.js',    index: './src/index.js'  },  output: {    path: path.resolve(__dirname, 'build'),    filename: '[name].js',  },}

output.filename 用了 [name] 的语法,意思是根据 entry 对象,根据多个入口文件,生成多个打包文件。

前提是 entry 需要为对象的形式。如果格式不对,filename 值会被认为无效,使用回默认的 main.js


上一篇: win11 apk安装(win11运行apk) 下一篇:什么是DIP|魏子柠
返回顶部