189 8069 5689

Webpack4教程-第三部分,如何使用插件-创新互联

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了贵阳免费建站欢迎大家使用!

大家好!今天我们介绍插件这个概念。插件与loader的不同之处在于它能完成更复杂的任务。基本上,loader做不了的其他事情,就可以用插件来做。loader往往作用于某种特定类型的文件,而插件则更加通用。这次,我们来学习如何使用插件,看看它解决了什么问题。本文会涉及一些日常用例,比如,生成链接了所有资源的HTML,以及把CSS抽取为单独的文件。

Webpack 4教程 - 第三部分 如何使用插件

使用插件最基本的方法是把它们放在配置文件中的plugins属性下。你需要调用new操作符创建一个插件的实例。

若想知道更多关于new关键字和原型的,请查看原型,ES6 class背后的大哥。

html-webpack-plugin

手动的把所有JavaScript文件添加到HTML里是件很繁重的事情。幸好你不必那样做!这有一个非常有用的插件HtmlWebpackPlugin。

npm install html-webpack-plugin

它使用起来很方便:

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

 plugins: [

    new HtmlWebpackPlugin()

 ]

};

它将会为我们在dist文件夹下面创建index.html文件。我们的JavaScript文件会以链接形式插入在标签后面。

你需要自己追踪插入HTML的文件,而当它们变多时,这就很繁琐了。此插件则简化了这件事情。

另一件值得注意的重要事情就是,你的外链文件名可能会因为打包时使用哈希而改变。这就让HtmlWebpackPlugin更加有用了,因为你不需要手动追踪那些文件名。这个机制被用来应对浏览器的缓存。我们会在后面的课程讨论这个话题。

给插件传递配置

你可以给插件传递更多的配置。下面是一个为HtmlWebpackPlugin传入一个HTML模板的例子:

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

 plugins: [

    new HtmlWebpackPlugin({template: './src/index.html'})

 ]

};

有了它,插件就不再使用默认的HTML文件,而会使用你提供给它的那个。 可以在这个库看到更多的配置项。

把同一个插件使用多次

你可能会好奇,为什么我们每次使用插件,都要用new新建一个实例。这是因为你能够不止一次地使用同一个插件。

当创建多页面应用时,你可能需要不止一个HTML模板文件。

如果你想了解更多关于entry和output的内容,以及如何使用它们创建多文件应用,可参考我们的第一节课。

这可以通过多次使用HtmlWebpackPlugin来实现。

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const path = require('path');

module.exports = {

 entry: {

   one: './src/one.js',

   two: './src/two.js',

 },

 output: {

   filename: '[name].bundle.js',

   path: path.resolve(__dirname, 'dist')

 },

 plugins: [

    new HtmlWebpackPlugin({

     filename: 'one.html',

     template: './src/one.html',

     chunks: ['one']

   }),

    new HtmlWebpackPlugin({

     filename: 'two.html',

     template: './src/two.html',

     chunks: ['two']

   })

 ]

};

插件的实例,会基于chunks数组对入口点(entry point)进行匹配。根据上面的配置运行Webpack,会得到:one.html,tow.html,one.bundle.js,two.bundle.js。

插件和loader并用

在之前的教程里,我们把css-loader和style-loader结合起来,并把输出的css代码插入