伏龙阁资源网

Webpack基础教程之名词解释
站长资源 2024/11/25 佚名
2 0

一、概念介绍

本质上，webpack 是一个现代JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

它是高度可配置的，但是，在开始前你需要先理解四个核心概念：

入口(entry)

输出(output)

loader

插件(plugins)

1、 入口(entry)

指定webpack从哪个模块开始构建项目，通过一下配置指定一个入口起点(或多个入口起点)，被处理到称之为 bundles 的文件中：

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js'
}

2、出口(output)

处理打包生成的 bundles 文件，如指定输出文件位置，文件名等。

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test_name.bunlde.js'
  }
}

3、loader

loader 作用是将所有文件类型转换成webpack能处理的有效模块，然后就可以通过webpack将文件打包。

本质上，webpack loader将所有类型文件转换成应用程序的依赖图可以直接引用的模块。

特殊: 只有webpack支持 import 导入任何类型模块，如 .css,.vue 等文件。

webpack 配置 loader的两个目标：

1.识别需要对应 loader 处理的文件。(使用test属性)

2.转换文件使其能够添加到依赖图并最终添加到 bunlde 中。(使用use属性)

// webpack.config.js
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'my-first-webpack.bundle.js'
 },
 module: {
  rules: [
   { test: /\.txt$/, use: 'raw-loader' } 
   // test/use 两个属性是必须的
  ]
 }
}
module.exports = config;

4、插件(plugins)

使用插件可以执行范围更广的任务。通过 require() 引用后添加在 plugins 数组中。

另外如果需要多次使用同一个插件，则使用 new 操作符来创建它的一个实例。

安装html-webpack-plugin：

npm install html-webpack-plugin --save-dev
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'my-first-webpack.bundle.js'
 },
 module: {
  rules: [
   { test: /\.txt$/, use: 'raw-loader' }
  ]
 },
 plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new HtmlWebpackPlugin({template: './src/index.html'})
 ]
};
module.exports = config;

二、入口起点(Entry Points)

webpack的 entry 属性不仅可以配置单个入口，还可以配置多个入口：

1、单个入口(简写)配置

用法：entry: string|Array<string>

简单使用 ：

const config = {
 entry: './path/to/my/entry/file.js' 
};
module.exports = config;

entry 属性的单个入口配置方式：

const config = {
  entry:{
    main:'./path/to/my/entry/file.js'
  }
}

若向 entry 传入 [文件路径(file path)数组]，将创建 多个主入口，常常用在需要同时注入多个文件，并将它们的依赖导向(graph)到一个chunk时。

2、多个入口(简写)配置

对象语法

用法：entry: {[entryChunkName: string]: string|Array<string>}

// webpack.config.js
webpack.config.js
const config = {
 entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
 }
};

虽然语法繁琐，但这是应用程序中定义入口的最可扩展的方式。

“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

常见场景

列出一些常见的入口配置和实际案例：

(1)分离 应用程序(app) 和 第三方库(vendor) 入口

// webpack.config.js
const config = {
 entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
 }
};

webpack 从 app.js 和 vendors.js 开始构建，并且他们是完全分离互相独立，为了支持提供更佳 vendor 分离能力的 DllPlugin，考虑移除该场景。

(2)多页面应用程序

// webpack.config.js
const config = {
 entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js'
 }
};

这样告诉 webpack 需要 3 个独立分离的依赖图，

使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。

由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

更多关于Webpack基础教程请点击下面的相关文章

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接