深入浅出webpack之plugin

plugin

plugin可以用于执行更加广泛的任务,比如打包优化,资源管理,环境变量注入等

• CleanWebpackPlugin

  • CleanWebpackPlugin用于每次重新打包时删除之前生成的打包文件

    `npm i clean-webpack-plugin -D`
    const path = require('path');
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');
    module.exports = {
        entry:'./src/main.js',
        output:{
            filename:'awei.js',
            path:path.resolve(__dirname,'./build')
        },
        plugins:[
            new CleanWebpackPlugin()
        ]
    }
    

• htmlWebpackPlugin

  • 直接为项目生成一个或多个HTML文件（HTML文件个数由插件实例的个数决定），并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。通过配置，可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外，还可以通过向插件传递参数，控制HTML文件的输出。

  • CleanWebpackPlugin用于每次重新打包时删除之前生成的打包文件

    `npm i html-webpack-plugin -D`
    const path = require('path');
    const HtmlWebpackPlugin = require('clean-webpack-plugin');
    module.exports = {
        entry:'./src/main.js',
        output:{
            filename:'awei.js',
            path:path.resolve(__dirname,'./build')
        },
        plugins:[
            new HtmlWebpackPlugin({
                title:'my app',
                //可以设置自定义模板,让打包生成的html文件根据自定义模板生成
                template:'./public/index.html'
            })
        ]
    }
    

• DefinePlugin

  • 此插件是内置插件,不需要单独安装,作用是在编译时创建配置的全局常量

    const path = require('path');
    const {DefinePlugin} = require('webpack');
    module.exports = {
        entry:'./src/main.js',
        output:{
            filename:'awei.js',
            path:path.resolve(__dirname,'./build')
        },
        plugins:[
            new DefinePlugin({
                BASE_URL:'"./"'
            })
        ]
    }
    

• copyWebpackPlugin

  • 此插件是内置插件,不需要单独安装,作用是在编译时创建配置的全局常量

  • 插件目前默认安装是11版本,但是运行时报错,所以换了10版本,暂时没找到问题,希望有大佬指点一下

    npm i copy-webpack-plugin@10 -D

    const path = require('path');
    const {DefinePlugin} = require('webpack');
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    module.exports = {
        entry:'./src/main.js',
        output:{
            filename:'awei.js',
            path:path.resolve(__dirname,'./build')
        },
        plugins:[
            new DefinePlugin({
                BASE_URL:'"./"'
            }),
            new CopyWebpackPlugin({
                // 需要copy的配置项
                patterns: [
                    {
                        // 从哪里copy
                        from: "public",
                        // to:'',这里可以省略,自动从output的path去找
                        globOptions: {
                            ignore: [
                                // **/必须要加,表示从当前路径忽略
                                "**/index.html",
                                "**/.DS_Store",
                            ],
                        },
                    },
                ],
            }),
        ]
    }
    

• 示例代码

  https://gitee.com/weiLZ598/webpack-study.git