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

概念

本质上，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")
        }
    }
}