`

[译]webpack官网文档 :概念 -- 1.介绍

阅读更多

原创翻译,转载请注明出处。

原文地址:https://webpack.js.org/concepts/

 

概念

Webkack是一个现代javascript程序的打包工具。它可以灵活配置,在开始使用之前,你应该理解它的4个核心概念。

作为学习webpack的一部分,这个文档的目的是给你一个这些概念的高层次的概述,同时会提供这些概念的详细用例连接。

 

入口(Entry

Webpack会绘制一个你的应用的所有依赖的图。这个图的开发的地方被成为入口点(entry point)。这个入口点告诉webpack要从哪儿开始,并顺着依赖图来确定哪些东西需要打包。你可以把应用的入口点理解成上下文的根,或者开始应用的第一个文件。

webpack的配置文件里,用entry属性来定义入口点。

最简单的例子如下:

 

webpack.config.js

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

 

根据应用的需要,有多个方法去声明entry属性。

 

输出(output

把应用的所有资源都打包在一起之后,你需要告诉webpack要把你的应用包放在哪儿。Webpackoutput属性告诉webpack怎样处理打包之后的代码。

 

webpack.config.js

const path = require('path');
 
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

 

在上面的例子中,我们使用了output.filenameoutput.path两个属性来告诉webpack打包之后的包名和把它放在哪儿。

 

属性output还有很多可以配置的特性。

 

加载器(Loaders

目标是把所有的项目资产都变成是webpack关联的,而不是浏览器关联的。(这并不意味着他们都必须被绑定到一起)webpack把每个文件(.css.html.scss.jpg等等)都看成是模块。但是,webpack只懂得javascript语言。

在把依赖加入到依赖图的同时,webpack里的loaders会把相对应的文件转换成模块。

概要来说,它在你的webpack 配置文件里有两个目的:

  1. 标识了哪些文件应该通过特定的loader来转换(test属性)
  2. 转换这些文件,以便它能被加入到你的依赖图(并且最终到你的应用包里)(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: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};
 
module.exports = config;

 

上面的配置为一个module定义了rules属性,和它的两个必须属性:testuse。这个告诉webpack编译器以下信息:

“你好编译器,当你在require()/import声明里遇到了‘.js’或者‘.jsx’文件的时候,使用babel-loader来转换这些文件,让后把他们放到应用包里。”

当在webpack配置文件里定义rules的时候,要记住很重要的一点,他们要被定义在module.rules下,而不是rules。不管怎样,当你定义错误的时候webpack会通知你。

 

插件(Plugins

因为Loaders只是执行转换每一个文件,plugins被经常用于(但不局限于)执行动作和对打包好的模块里的集合(compilations)或者块(chunks)定制各种功能。Webpackplugin系统功能非常强大并且可以定制。

为了能使用plugin,你需要require()它,并且把它加入到plugins数组里。很多plugins可以通过参数进行定制。因为你可以在配置文件里多次使用它来实现不同的目的,所有需要用new来作成一个实例。

 

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
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: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
 
module.exports = config;

 

webpack提供了很多可以马上使用的plugins

在你的webpack配置文件里使用plugins是非常简单的,当然有一些用例需要进行更深的探讨。

 

-- End -- 

 

 

0
0
分享到:
评论

相关推荐

    webpack-dev-server-demo.zip

    1. **本地开发服务器**:Webpack-dev-server 提供了一个运行在本地的服务器,它可以实时编译和刷新代码。开发者可以通过 `localhost:8080`(默认端口)访问到项目,而无需每次修改后手动刷新浏览器。 2. **自动刷新...

    Full_Webpack-45.4.2608-IT310_Full_Webpack.exe

    Full_Webpack-45.4.2608-IT310_Full_Webpack.exe

    webpack-使用webpack-dev-middleware.rar

    1. **中间件概念**:在 Node.js 中,中间件是一种处理请求-响应对的方式,它遵循“洋葱模型”,允许多个中间件函数按顺序执行,每个函数可以部分处理请求并传递给下一个函数,或者终止处理链。 2. **安装**:首先,...

    Python库 | webpack-s3-2019.8.30.tar.gz

    资源分类:Python库 所属语言:Python 资源全名:webpack-s3-2019.8.30.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    PyPI 官网下载 | django-webpack-loader-0.1.2.tar.gz

    **PyPI 官网下载 | django-webpack-loader-0.1.2.tar.gz** 在Python的世界里,`PyPI`(Python Package Index)是官方的第三方软件包仓库,它为Python开发者提供了一个集中化的地方来发布、查找和安装软件包。本资源`...

    webpack-cdn-plugin-master.rar

    Webpack CDN 插件详解 Webpack 是一款强大的前端模块打包工具,它允许开发者将复杂的前端应用拆分成多个小模块,然后按需加载。在大型项目中,为了提高页面加载速度,通常会采用 Content Delivery Network (CDN) 来...

    webpack-plugin-hash-output-master.rar

    4. `README.md`: 提供项目介绍、安装和使用方法的文档。 5. `test/`: 可能包含测试用例和配置,用于验证插件功能的正确性。 Webpack 插件的工作原理是基于 Webpack 的生命周期钩子(Hooks)。在 Webpack 构建过程中...

    Python库 | django_webpack4_loader-0.0.2-py2.py3-none-any.whl

    资源分类:Python库 所属语言:Python 资源全名:django_webpack4_loader-0.0.2-py2.py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    vue init webpack 依赖的webpack包

    解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题,方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法: 1、将webpack放到C...

    02.webpack-base_webpackSetting.rar

    `02.webpack-base_webpackSetting.rar` 文件包含的资源详细介绍了如何配置 Webpack 以支持 React 开发。下面将深入探讨 Webpack 配置的关键点,以及与 React 结合使用的常见实践。 ### 1. 安装必要的包 在开始配置...

    next-missing-terser-webpack-plugin-dep-源码.rar

    【标题】"next-missing-terser-webpack-plugin-dep-源码" 提供的是一个用于Next.js项目的优化插件——Next.js Missing Terser Webpack Plugin的源代码。这个插件是针对Webpack构建过程中的一个特定问题设计的,即在...

    webpack-url-loader-master.

    在 Webpack 的生态中,Loader 和 Plugins 是两个核心概念,它们分别用于处理不同类型的文件和执行构建过程中的自定义任务。 Webpack-Url-Loader 是 Webpack 的一个加载器(Loader),它的主要功能是处理 URL 引用的...

    Python库 | django_webpack_bundle-1.0.1-py2.py3-none-any.whl

    1. **Python**: Python是一种高级编程语言,以其易读性、简洁的语法和强大的标准库而受到广大开发者喜爱。它是跨平台的,可以在各种操作系统上运行,广泛应用于Web开发、数据分析、机器学习等多个领域。 2. **...

    HPEasyStart-13.6.5-DJ3700-40-16-1234-1-Webpack

    惠普打印机驱动 HP3778

    copy-webpack-plugin-demo.rar

    copy-webpack-plugin-demo.rar 拷贝文件demo, 现成案例,可以参考使用 免积分下载地址 https://download.lllomh.com/cliect/#/product/JB23148366892270

    Webpack:Webpack基础概念与安装.docx

    Webpack:Webpack基础概念与安装.docx

    webpack_temp.zip

    1. **Webpack 基础概念**: - **Entry**:入口是构建过程的起点,对应于多页面应用中的每个 HTML 页面。 - **Output**:输出结果,Webpack 将所有模块打包后输出到指定目录。 - **Loaders**:转换器,用于处理非 ...

Global site tag (gtag.js) - Google Analytics