webpack基础

Posted 2021-03-15 魏的博客

// webpack
// 多入口
// 多出口（动态配置文件名称）


// 模块解析（module）
// 需要安装对应的处理模块
// css:npm install style-loader css-loader
// module: {
//     rules: [
//         // 当webpack遇到不认识的模块，需要对应的loader进行处理
//         {
//             test: /.css$/,
//             use:
//                 // 两个loader的时候使用数组,loader有执行顺序，从后往前
//                 ["style-loader", "css-loader"]
//         },
//         {
//             test:/.css$/,
//             // 多个loader的写法和单个loader的写法不同，单个loader使用对象形式，多个loader直接使用数组形式
//             use:{
                
//                 loader:"url-loader"
//             }
//         },
//         {
//             test:/.css$/,
//             use:{
//                 //filr-loader是专门处理静态资源模块的
//                 loader:"file-loader",
//                 // loader是可以配置参数的
//                 options:{
//                     // 打包后的静态资源名称
//                     //不同的文件打包后的文件名称不同，所以不能使用固定的文件名称，所以要使用静态资源占位符 
//                     // name:‘pic.png‘,
//                     // [name]传进来的文件名称
//                     // [hash]当前打包版本的hash,[hash:6]可以保留指定位数hash
//                     // [ext]当前打包的格式，官网loader上边还有其他特定的占位符，
//                     name:"[name]_[hash].[ext]",
//                     // 输出路径，统一管理文件的存放位置
//                     outputPath:‘images/‘
//                 }
//             }
//         }
//     ]
// }


// 经常使用的处理的文件：css文件、less文件、scss文件、字体图标、图片

// webpack官网中的loader部分有官方推荐的loader

// url-loader可以代替file-loader有limit字段，能限制文件大小，当文件的大小小于设置的尺寸。会被转化成base64格式，大于limit才会以独立文件显示，可以针对图标进行设置，低于一定大小的时候不以文件形式存在可以减少请求实现优化


// 处理less要使用less和less-loader（按webpack官网进行配置）

// can i use 网站上边可以看兼容性的问题

// 样式自动添加前缀postcss-loader autoprefixer -D
// 自动添加css前缀
// {
//     test:/.less$/,
//     use:["style-loader","css-loader","less-loader",{
//         loader:"postcss-loader",
//         options:{
//             plugins:()=>{
//                 require("autoprefix")
//             }
//         }
//     }]
// }

// loder是webpack解析模块的，plugins是来扩展webpack的功能的

// 构建之前先删除dist文件夹，防止dist中遗留很多版本的文件
// 这类的功能是通过webpack的plugins插件扩展配置来实现的

// clean-webpack-plugin构建前清空dist目录
// html-webpack-plugin打包后自动创建html文件

// 步骤：
// 1、引入插件
//     const {CleanWebpackPlugin} = require("clean-webpack-plugin")
// 2、实例化插件
//     plugins:[
//         new CleanWebpackPlugin()
//     ]
    // 3、可以在实例化的时候传入对象参数来对插件做配置
    // const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
    // plugins:[
    //     new HtmlWebpackPlugin({
                // 配置项参数参考文档：https://github.com/jantimon/html-webpack-plugin#configuration
                // html文件中要使用ejs语法的模板引擎
                // 使用<%=htmlWebpackPlugin.options.title%>可以访问到
    //     })
    // ]

    // mini-css-extract-plugin可以是css生成一个独立的css文件，而不是直接在html中以style标签的形式插入,不能使用style-loader,而是使用MiniCssExtractPlugin,要规定输出的文件名称
    // const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)
    // plugins:[
    //     new MiniCssExtractPlugin()
    // ]