欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack打包工具深入浅出基础配置总结

程序员文章站 2022-03-14 20:15:56
概念本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。官网直通车基础配置模式 mode入口 entry出口 output插件 plugins (loader插件)loader插件处理csscss-loader 分析css关系,需要加载哪...

概念

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

官网直通车

基础配置

模式 mode
入口 entry
出口 output
插件 plugins (loader插件)

loader插件

  • 处理css
    css-loader 分析css关系,需要加载哪些css文件
    style-loader 把css插入到html>head标签里里面
    mini-css-extract-plugin 抽取css为单独文件
    optimize-css-assets-webpack-plugin 压缩css
    less 处理less文件
    less-loader 加载less文件

配置实例:

//导入处理html插件
const htmlWebpackPlugin = require("html-webpack-plugin")
//压缩、抽取css为单独文件
const minCssExtractPlugin = require("mini-css-extract-plugin")
//压缩css
const optimizeCss = require("optimize-css-assets-webpack-plugin")

//导出配置文件
module.exports = {
    //定义入口文件
    entry:"./src/index.js",
    //定义出口文件
    output:{
        //文件名
        filename:"main.js",
        //查询路径
        path:__dirname+"/dist"
    },
    plugins:[
        //创建一个html处理插件
        new htmlWebpackPlugin({
            //压缩
            minify:true,
            //标题
            title:"我的第一个webpack",
            //模板
            template:__dirname+"/public/index.html"
        }),
        //抽取css  生成style.css文件
        new minCssExtractPlugin({
            filename:"style.css"
        }),
    ],
    optimization:{
        //css、js压缩器
        minimizer:[ new optimizeCss() , new UglifyjsWebpackPlugin],
    },
    module:{
        //规则
        //不同文件的处理插件不同
        rules:[
            {
                test:/\.css$/,
                //从右至左依次执行
                use:["style-loader","css-loader"]
            },
            {
                test:/\.less$/,
                //从右至左依次执行
                use:[minCssExtractPlugin.loader,"css-loader","less-loader"]
            },
        ]
    },
    resolve:{
        //别名
        alias:{
            "@":path.resolve(__dirname,"./src")
        }
    }
}

本文地址:https://blog.csdn.net/weixin_48179599/article/details/107522231

相关标签: Webpack