一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 webpack是目前前端较受欢迎的打包工具，今天刚学习了一点基础，记录一下

webpack基础使用

安装

npm i webpack webpack-cli -D

配置

新建 webpack.config.js文件;

entry是webpack的入口，所有的一切从这里开始，从这里开始所有的依赖都会被打包;

output是webpack的出口，打包完成后的文件在这里展示;

module是配置loader和插件的位置 rules配置loader plugin配置插件;

module.exports = {
    // 模式开发development
    // 模式上线 production
    mode:"development",
    // 方便调试错误
    devtool:"source-map",
    // 入口
    entry:'./src/main.js',
    // 出口
    output:{
        使用__dirname需要引用path模块
        path:path.resolve(__dirname,"./build"),    //绝对路径
        // 打包成功后文件名称
        filename:'js/bundle.js'
    },
    // 配置模块
    module:{
        // 模块规则
        rules:[]
        plugins:[]
}

打包js文件

js文件不需要特定的loader，webpack内置可以打包js
运行程序便可以打包

webpack-loader

css-loader主要用来打包css文件

style-loader用来用来关联css与html

需要注意的是必须在css-loader打包完成后早调用style-loader才可以，注意执行顺序是从下到上，从右到左

安装

npm i css-loader

配置

rules:[
    test:/\.css$/,    //匹配正则css结尾的文件
    //loader:"css-loader"        语法糖
    use:[
        "style-loader",    //第二个执行
        "css-loader"       //第一个执行
    ]

]

这样就可以打包css文件了，但是似乎还是无法打包less和sass文件，这就用到了less-loader

less-loader配置

需要注意less完成后必须要css在进行打包，style进行关联

安装 npm i less-loader
rules:[
    test:/\.css$/,    //匹配正则css结尾的文件
    //loader:"css-loader"        语法糖
    use:[
        "style-loader",    //第二个执行
        "css-loader"       //第一个执行
        "less-loader"
    ]

]

webpack5之前，打包图片、字体用file-loader; webpack5用asset（内置，无需安装）都给各位说一说

file-loader

安装

npm i file-loader

配置

rules:[
    test:/\.(jpg|png|gif|svg)$/,   正则匹配
    use:{
        loader:"file-loader",
        options:{                    //设置
            outputPath:"img"         //输出到img文件夹，会自己创建
            name:"[name]_[hash:6].[ext]"    //分别代表 文件原本名字，6为哈希，后缀
            //可以简写为name"/img[name]_[hash:6].[ext]"
        }
    }，
    // css-loader也可以打包图片，与file-loader冲突，添加type属性解决（不确定，求解！！！），不加就会打包两次，并且不显示
    type:"javascript/auto"
]

url-loader

url-loader和file-loader基本一样

配置

rules:[
    test:/\.(jpg|png|gif|svg)$/,   
    use:{
        loader:"file-loader",
        options:{                   
            outputPath:"img"        
            name:"[name]_[hash:6].[ext]" 
            limit:100*1024                //限制打包最大的大小为100kb,超过会自动使用file-loader，不需要配置
        }
    }，
]

webpack5的asset使用

asset的asset/resource对应file-loader，asset/inline对应url-loader，

asset打包图片

配置

rules:[
    test:/\.(jpg|png|gif)$/,
    type:"asset",
    generator:{                       //配置文件名
        filename:"img/[name]_[hash:6][ext]"
    },
    parser:{
        dataUrlCondition:{            //配置允许最大的规则100kb
            maxSize:100 * 1024
        }
    }

]

asset/resource打包字体图标

配置

rules:[
    test:/\.(eot|ttf|woff2?)$/,
    type:"asset/resource",
    generator:{
        //简写打包到font文件中
        filename:"font/[name]_[hash:6][ext]"
    }
]

asset内置很好用，省去了很多安装loader的过程，不过目前大部分脚手架还没用webpack5，所以最好file-loader，url-loader还是有必要看看的

webpack插件

插件是webpack必不可少的组成部分，贯穿webpack生命周期

cleanWebpackPlugin

  这个插件很简单，主要就是在打包之前删除之前打包的代码

安装 npm i clean-webpack-plugin

webpack.config.js引入
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

插入

plugins:[
    new CleanWebpackPlugin()  //插件基本都是一个类，需要new一下
]

HtmlWebpackPlugin

这个插件主要是生成html模板

安装

npm i html-webpack-plugin

引入

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

插入

    new HtmlWebpackPlugin({
        // 指定html打包模板 
        template:"./public/index.html"
    })

DefindPlugin

用来生成特殊字符，全局使用，相当于一个变量，如果值固定需要双层包裹数值，单层会当作值为一个js变量，去寻找
webpack内置插件 不需要引入

new DefinePlugin({
    BASE_URL : "'555'"
})

使用

<title><%= BASE_URL %></title>

CopyWebpackPlugin

这个插件用来复制文件

安装

npm i copy-webpack-plugin 配置 // 匹配

patterns:[
    {
        from:"public",     //复制那个文件夹
        to:'./',           //到那个文件夹
        globOptions:{
            ignore:[
                "**/index.html"    //匹配那个不复制
            ]
        }
    }
]
注意，目前插件最新版本为10，报错，降级为9成功

注意事项

webpack尽量不要全局安装，因为你可能在vue，react中都依赖webpack，去过全局安装会造成所有的文件都用相同的配置进行打包，

总结

今天主要学了webpack的配置loader和,plugins这两个相对比较简单，希望自己能够坚持下去，早点上岸找到工作，加油！！！

Webpack的基础配置与使用