tofacebook.com -专业IT技术社区 【百家号】脸书百科,webpack官方文档分析(二):概念 Web程序 - tofacebook.com-专业IT技术社区
74°

【百家号】脸书百科,webpack官方文档分析(二):概念 Web程序

标签:发送   script   nbsp   重要   fill   插件   new   href   自动注入   

1、概念

  webpack的核心是将JavaScript应用程序的静态捆绑模块当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,它映射您的项目所需的每个模块并生成一个或多个

从版本4.0.0开始,webpack不需要配置文件来捆绑您的项目,但它可以非常灵活地配置以更好地满足您的需求

 

  (1)Entry:

  一个entry point指示哪个模块的WebPack应该使用开始建立了它的内部依赖关系图,将的WebPack找出entry point取决于(直接或间接)哪些其他模块和库。

默认情况下,其值为./src/index.js,但您可以通过webpack配置中配置entry属性来指定不同的(或多个入口点)例如:

webpack.config.js

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

  (2)Output:

  output 属性告诉WebPack哪里在哪里发出它创建的包以及如何命名这些文件。,默认./dist/main.js主输出文件,以及将其他生成的文件输出到./dist文件夹。

您可以配置中指定输出文件夹

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我们的bundle的名称以及我们希望它发送到的位置。在顶部导入的路径模块,它是一个Node.js核心模块,用于操作文件路径。

  (3)Loaders

  开箱即用,webpack只能理解JavaScript文件。Loaders允许WebPack处理其他类型的文件,并将它们转换成可被应用程序识别并添加到依赖图中的有效模块。

在较高级别,加载器在您的webpack配置中有两个属性:

  1. test属性标识应转换的文件。
  2. use属性指示应使用哪个加载程序进行转换。

webpack.config.js

const path = require(‘path‘);

module.exports = {
  output: {
    filename: ‘my-first-webpack.bundle.js‘
  },
  module: {
    rules: [
      { test: /\.txt$/, use: ‘raw-loader‘ }
    ]
  }
};

上面的配置rules为具有两个必需属性的单个模块定义了一个属性:testuse这告诉webpack的编译器如下

“嘿webpack编译器,当你遇到解析为require()importstatement语句中‘.txt‘文件的路径时,在将它添加到bundle之前使用raw-loader来转换它。”

重要的是要记住,在webpack配置中定义规则时,您要在其下定义规则,module.rules而不是rules为了您的便利,webpack会在不正确的情况下发出警告。

  (4)Plugins

  虽然加载器用于转换某些类型的模块,但可以利用插件执行更广泛的任务,如捆绑优化,资产管理和环境变量注入。

  要使用插件,您需要将require()添加到plugins数组中。大多数插件都可以通过选项进行自定义。由于您可以在配置中多次使用插件用于不同目的,因此您需要通过使用new运算符调用它来创建它的实例

webpack.config.js

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); //installed via npm
const webpack = require(‘webpack‘); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: ‘raw-loader‘ }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: ‘./src/index.html‘})
  ]
};

在上面的示例中,html-webpack-plugin为您的应用程序生成一个html文件,自动注入所有生成的包

  (5)Mode

  通过设定mode参数设置为developmentproduction或者none,您可以启用对应于每个环境的WebPack内置的优化。默认值为production

module.exports = {
  mode: ‘production‘
};

  (5)浏览器兼容性

webpack支持所有符合ES5标准的浏览器(不支持IE8及以下版本)。WebPack需要Promiseimport()require.ensure()如果要支持旧版浏览器,则需要在使用这些表达式之前加载polyfill

 

webpack官方文档分析(二):概念

标签:发送   script   nbsp   重要   fill   插件   new   href   自动注入   

原文地址:https://www.cnblogs.com/felixwang2/p/9374995.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。