Webpack4中的plugins插件概念与使用

2019-05-0830次阅读webpack

Webpack4中的plugins插件与loaders加载器的不同之处在于它们可以执行更广泛的任务。基本上,他们做loaders加载器不能做的任何其他事情。虽然loaders加载器绑定到特定类型的文件,但plugins插件可能更通用。例如生成包含所有资源链接的HTML文件,并将CSS提取为单独的文件。

使用loaders加载器的最基本方法是将它们放入配置的plugins插件属性中。您需要通过使用new运算符调用插件来创建它的实例。

 

html-webpack-plugin

手动将所有JavaScripts文件添加到HTML中可能很麻烦。还好你不需要这样做!这里一个非常有用的插件是html-webpack-plugin。

npm install html-webpack-plugin

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    plugins: [
        new HtmlWebpackPlugin()
    ]
};

它将为我们创建index.html文件,并将其放到dist目录中。并将javascript文件引用到<body>标签之前。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

这里需要注意的另一个重要问题是,由于哈希值的使用,文件名可能会发生变化。它使的htmlwebpackplugin更加有用,因为您不需要跟踪文件名。引入这个机制是为了处理浏览器处理缓存的方式。

 

将options选项传递给plugins插件

你还可以将其他options选项传递给插件,如下:

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
};

多亏了这一点,它将使用您提供的HTML文件,而不是创建默认的HTML文件。要查看更多html-webpack-plugin可用选项,请参阅这里

 

多次使用同一插件

你可能想知道为什么我们每次使用插件时都需要使用new关键字。这是因为你可以多次使用同一个插件。例如创建多页面应用程序时,你可能希望输出多个HTML文件。关于Webpack4中的Entry入口、output输出以及如何使用它们创建多个页面应用程序的,请查看这里

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
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块数组匹配入口点。运行上述配置将导出:one.html、two.html、one.bundle.js、two.bundle.js。

 

Plugins插件与loaders加载器一起工作

上一篇中,我们使用组合的css-loader和style-loader将我们的css代码注入<style>标签。你可能更愿意向用户提供实际的css文件。为此,请使用mini-css-extract-plugin。

在过去,我们使用ExtractTextWebpackPlugin来做到这一点,但是从Webpack 4开始它不应该用于css。了解更多信息,请阅读此问题

npm install mini-css-extract-plugin

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new MiniCssExtractPlugin()
    ]
}

index.js

import './styles.css';

由于htmlwebpackplugin,生成的CSS文件将自动链接到HTML。你最终会得到这样的输出:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="main.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="main.js"></script></body>
</html>

使用此配置运行webpack将为每个包含CSS导入的JavaScript文件创建一个CSS文件。

上一篇: Webpack4中的loader用于对模块的源代码进行转换  下一篇: HTML引入或include包含其他HTML文件  

Webpack4中的plugins插件概念与使用相关文章