Webpack核心概念

作者:梁雁明

著权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Webpack的核心,其实就是一款用于现代javaScript应用程序的静态模块打包管理器。webpack运行时,会自动构建映射到项目所需的每一个模块,并生成一个或多个的bundles文件的依赖图表。从版本4开始,webpack不再要求配置文件进行项目打包,然而却可以难以置信的,更好的适配你的需求。

开始学习webpack之前,你需要了解它的核心概念:

·                  Entry 输入

·                  Output 

·                  Loaders

·                  Plugins插件

这份文档意在提供以上概念的高级综述(这里你可以理解为是一种形而上的总体的概括性或总结性的表述)同样也会链接到针对具体使用案例的详细内容。


Entry

输入点表示webpack用于开始构建内部依赖图表的那个模块, webpack会计算输入点所依赖的其它模块或类库(直接或间接地)。

默认地,输入点./src/index.js但是你可以指定一个不同的输入点(或多个输入点)来配置输入点的属性,如例:

webpack.config.js

module.exports ={

  entry:‘./path/to/my/entry/file.js’

};

Learn more in the entry points section. 


Output

输出属性指示webpack在哪里生成bundle文件以及如何命名这些文件,./dist/main.js 是主输出文件,目录./dist用于其它生成的文件。.

你可以通过指定output字段去配置程序的输出部分:

webpack.config.js

constpath =require(‘path’);

 

module.exports ={

  entry:‘./path/to/my/entry/file.js’,

  output:{

    path:path.resolve(__dirname,‘dist’),

    filename:‘my-first-webpack.bundle.js’

  }

};

在上面例子中,我们使用属性 output.filename  output.path来告诉webpack打包文件的名称以及包(bundle)被打到哪里去。如果你对在头部(顶端)导入的路径模块好奇,核心的 Node.js module 用于操作这些文件。

The output property has many more configurable features and if you like to know more about the concepts behind it, you can read more in the output section


Loaders

与众不同的是, webpack只能理解javascript文件Loaders允许webpack处理其它文件类型,并将这些文件转换成能被程序使用的有效模块,被加入依赖图表中。

注意,入例如.css 文件这样的模块类型是具体化webpack的一种特性能力,没有被其它bundlers或任运行器所支持,我们认为,当允许开发者构建一种更加准确的依赖图表时,语这种可扩展性是得以保证的。

在高级层面loaderswebpack配置中有两个目的:

1.           test 属性标识哪个或哪些文件应该

2.           use 属性哪个加载器被用来转化文件。.

webpack.config.js

constpath =require(‘path’);

 

module.exports ={

  output:{

    filename:‘my-first-webpack.bundle.js’

  },

  module:{

    rules:[

      {test:/\.txt$/,use:‘raw-loader’}

    ]

  }

};

以上的配置文件定义了rules 属性用于单模块和两个要求的属性:test use。这告诉了webpack的编译器以下内容:

“Hey webpack 编译器, when you come across a path that resolves to a ‘.txt’ file inside of a require()/import statement, use the raw-loader to transform it before you add it to the bundle.”

当在webpack配置文件中定义规则候,注意,你是在 module.rules 下定的而不是 rules.了你好如果配置错误webpack出警告的。 

You can check further customization when including loaders in the loaders section.


Plugins插件

当加载器被用来转化模块类型时,插件可以被用于执行类似打包优化,资产管理和环境变量注入等的范围更广的任务。

Check out the plugin interface and how to use it to extend webpacks capabilities. 

要使用插件你需要require()它,被添加到plugins 数组中大多数插件是通过选择进行定制化的。因为你可以在一个配置文件中基于不同目的使用多个插件,你需要通过new操作符创建实例。

webpack.config.js

constHtmlWebpackPlugin =require(‘html-webpack-plugin’);//installed via npm

constwebpack =require(‘webpack’);//to access built-in plugins

 

module.exports ={

  module:{

    rules:[

      {test:/\.txt$/,use:‘raw-loader’}

    ]

  },

  plugins:[

    newHtmlWebpackPlugin({template:‘./src/index.html’})

  ]

};

在上例中,插件html-webpack-plugin 通过自动注入所有你生成的bundles为你的应用生成一个html文件。

有很多webpack提供的插件! Check out the list of plugins

webpack配置文件中使用插件是很直播的– 然而仍然有一些使用案例值得探索, learn more about them here.


Mode

通过设置mode 参数, developmentproduction 或者none,可以启用webpack’s 内健的关联各自环境的优化器。默认值是production.

module.exports ={

  mode:‘production’

};

Learn more about the mode configuration here and what optimizations take place on each value.


Browser Compatibility浏览器兼容性

webpack支持所有ES5-compliant (IE8 and below are not supported)的浏览器,webpack 需要Promise 以用于import() require.ensure()如果想要支持老一点的浏览器,你需要在使用这些表达式之前load a polyfill

源https://webpack.js.org

文章发布只为分享区块链技术内容,版权归原作者所有,观点仅代表作者本人,绝不代表区块链兄弟赞同其观点或证实其描述。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享