Webpack4教程-第三部分,如何使用插件-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

Webpack4教程-第三部分,如何使用插件

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

创新互联公司是一家专业提供新干企业网站建设,专注与成都做网站、网站制作、H5建站、小程序制作等业务。10年已为新干众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

大家好!今天我们介绍插件这个概念。插件与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代码插入