webpack学习记录-插件

Posted 2021-03-05 arohaa

webpack学习记录(三)-插件

插件是什么

plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。
plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

html-webpack-plugin

根据插件中配置项 template 配置的模板文件生成dist目录下的html文件，把打包生成的js文件自动插入进去，并且可以把html代码进行压缩，去双引号等操作。

安装及配置

npm i html-webpack-plugin -D

安装好后在webpack.config.js中进行引入

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

在webpack.config.js中的module.exports下配置如下属性

plugins:[
    new HtmlWebpackPlugin({
        template: './src/index.html',   //指定模板文件
        filename: 'index.html',         //生成文件名
        minify: {
            removeAttributeQuotes: true,    //删除属性双引号
            collapseWhitespace: true,   //压缩成一行
        },
        hash: true  //引入的时候添加哈希戳
    })
]

要想每次打包都生成不一样的文件，可以在输出属性下配置文件名 bundle.[hash:8].js

打包CSS文件

css-loader

css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们 。

style-loader

style-loader将css用style标签插入到html文件中

less-loader

把less转换成css

安装

npm i style-loader css-loader -D

npm i less less-loader -D

用法

在webpack.config.js中module.exports下配置如下属性

module: {
    rule: [
        {
            test: /.css$/, //正则匹配以css结尾的文件
            use: ['style-loader','css-loader','less-loader']    //顺序从右向左，由严格限制，先转换解析后插入。
        }
    ]
}

当我们需要在模板html里写内部样式的时候，会被style-loader覆盖，这个时候可以这样配置

module: {
    rule: [
        {
            test: /.css$/, //正则匹配以css结尾的文件
            use: [  //使用对象可以写入参数，执行其他操作
                {
                    loader: 'style-loader', //Loader名
                    options: {
                        insert: 'top'   //将样式插入到顶部
                    }
                },
            'css-loader',   
            'less-loader']  //顺序从右向左，由严格限制，先解析后插入。
        }
    ]
}

mini-css-extract-plugin

用来把css抽离出来并且通过link标签引入

安装并引入

npm i mini-css-extract-plugin

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)

使用

plugins:[
    new MiniCssExtractPlugin({
        filename: 'main.css',           //生成文件名
    })
],
module: {
    rules: [
        {
            test: /.css$/,
            use: {
                MiniCssExtractPlugin.loader,    //代替style-loader
                'css-loader'
            }
        }
    ]
}

如果想抽离出多个css文件只需创建多个MiniCssExtractPlugin即可。

optimize-css-assets-webpack-plugin

压缩css文件

terser-webpack-plugin

如果使用mini-css-extract-plugin的话，js文件就不会自行压缩了，因此提供了该插件给我们手动压缩js文件。

安装及使用

npm i optimize-css-assets-webpack-plugin -D

npm i terser-webpack-plugin -D

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
    optimization: { //优化项
        minimizer: [
            new TerserJSPlugin({}),
            new OptimizeCssAssetsWebpackPlugin({})
        ]
    }
}

postcss-loader & autoprefixer

用来自动添加浏览器前缀，使用前先在package.json目录下配置浏览器属性。

安装及配置

npm i postcss-loader autoprefixer -D

创建一个postcss.config.js

// postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')]
}

使用

module: {
    rule: [
        {
            test: /.css$/, //正则匹配以css结尾的文件
            use: ['style-loader','css-loader','postcss-loader'] //顺序从右向左，由严格限制，先转换解析后插入。
        }
    ]
}