Webpack的loader与插件

2.webpack

2.1.Webpack的安装

npm i webpack webpack-cli -g
#查看版本 
webpack --version

2.1.1Webpack执行命令

• webpack 进行打包生成dist文件

webpack 

2.1.2生成package.json

npm init

2.1.3 局部安装webpack

npm install webpack webpack-cli -D
#npx webpack 
#一般是去package.json "script": { "build" :"webpack --entry ./src/main.js"}
#指定路口
npx webpack --entry ./src/main.js --output-path ./build

2.1.4:创建webpack.config.js

const path = require("path")
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }
}
//再进行webpack打包

2.2:Webpack依赖图

• 如果指定了的入口文件，写的其他文件必须与入口文件产生依赖才能被识别打包

2.2.1:element.js

import "css-loader!../css/title.less"; 
​
const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊,李银河";
​
document.body.appendChild(divEl)

2.2.2:css打包

.title {
  color: #12345678;
  font-weight: 700;
  font-size: 30px;
​
  user-select: none;
}

2.2.3:下载cssloader

npm i css-loader -D

2.2.4:配置css-loader(只进行加载css文件)

• 第一种方式：内联式(查看2.2.1) css-loader!
• 第二种方式:配置方式

const path = require("path")
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/ //正则表达式,
        //loader的写法(语法糖)
        //loader:"css-loader"
        //loader完整写法
        use: [
          "style-loader"
          "css-loader", 
        ]
      }
    ]
  }
}
//再进行webpack打包

[注意]  use里面数组是从下往上进行加载,要先执行css-loader

2.2.5:下载style-loader(进行页面生效化css)

npm i style-loader -D,（查看上面的代码）

2.2.6:处理less

0. 先创建title.less文件

   @bgColor: blue;
   @textDecoration: underline;
   ​
   .title {
     background-color: @bgColor;
     text-decoration: @textDecoration;
   }
   

1. 在element.js中导入title.less

   // import "css-loader!../css/style.css";
   import "../css/style.css";
   import "../css/title.less";
   ​
   const divEl = document.createElement("div");
   divEl.className = "title";
   divEl.innerHTML = "你好啊,李银河";
   ​
   document.body.appendChild(divEl);
   ​
   

2. 安装lessc -D(是对less文件进行转换成为css)

   npm i less -D 
   

3. 下载less-loader处理lessc

   npm i less-loader
   ​
   npx lessc ./src/css/title.less title.css
   

   const path = require("path")
   module.exports = {
     entry:"./src/main.js",
     output: {
       path: 绝对路径 path.resolve(__dirname,"./build"),
       filename:"bundle.js"
     }，
     module: {
       //配置规则
       rules:[
         {
           test:/.css$/ //正则表达式,
           //loader的写法(语法糖)
           //loader:"css-loader"
           //loader完整写法
           use: [
             "style-loader"
             "css-loader", 
           ]
         },
         {
           test: /.less$/,
           use: [
             "style-loader"
             "css-loader"
             "less-loader"
           ]
         }
       ]
     }
   }
   //再进行webpack打包
   

2.3:Postcss

2.3.1:创建一个test.css

.title {
  user-select: none;
}

2.3.2:下载postcss并且安装autoprefixer

npm i postcss postcss-cli autoprefixer -D

2.3.3:用命令进行操作

npx postcss --use autoprefixer -o demo.css(输出) test.css (输入)

2.3.4:查看demo.css

.title {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UseUJBQWlCO0tBQWpCLHNCQUFpQjtNQUFqQixxQkFBaUI7VUFBakIsaUJBQWlCO0FBQ25CIiwiZmlsZSI6ImRlbW8uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnRpdGxlIHtcbiAgdXNlci1zZWxlY3Q6IG5vbmU7XG59Il19 */

2.3.5:下载postcss-loader

npm i postcss-loader -D

const path = require("path")
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/ //正则表达式,
        //loader的写法(语法糖)
        //loader:"css-loader"
        //loader完整写法
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
          //{
            //loader:"postcss-loader",
            //options: {
              //postcssOptions: {
                //plugins: [
                  //require("autoprefixer")//是加上浏览器前缀
                  //require("postcss-preset-env")//是加上浏览器前缀
                //]
              //}
            //}
          //}
        
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
       
      // {
      //   test: /.(less|css)$/,
      //   use: [
      //     "style-loader",
      //     "css-loader",
      //     "less-loader"
      //   ]
      // }
    ]
  }
}
//再进行webpack打包

2.3.6:可以抽离postcss

//创建postcss.config.js
module.exports = {
  plugins: [
    require("postcss-preset-env")
  ]
}

2.3.7:下载postcss-preset-env

npm i postcss-preset-env -D

2.4:打包图片

2.4.1element.js

// import "css-loader!../css/style.css";
import "../css/style.css";
import "../css/title.less";
import "../css/image.css"
​
const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊,李银河";
​
const bgDivEl = document.createElement("div");
bgDivEl.className = "image-bg";
​
document.body.appendChild(divEl);
document.body.appendChild(bgDivEl)
​

2.4.2:在css文件夹中创建image.css并且在2.4.1中引入image.css

.image-bg {
  background:url("..//img/nhlt.jpg");
  width:200px;
  height:200px
  background-size:contain
}

2.4.3:下载file-loader

npm i file-loader -D

配置loader

const path = require("path")
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
      {
        test:/.(jpe?g|png|gif|svg)$/, 
        use: "file-loader"
      }
    ]
  }
}
//再进行webpack打包

2.4.4:element.js

// import "css-loader!../css/style.css";
import "../css/style.css";
import "../css/title.less";
import "../css/image.css"
//需要让webpack知道图片资源是一个模块方式，要不然只会给src赋值的永远都是字符串
import zzhImg from "../imag/zzh.png"
​
const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊,丢你";
​
const bgDivEl = document.createElement("div");
bgDivEl.className = "image-bg";
​
const imgEl = document.createElement("img")
imgEl.src = zzhImg //错误写法
​
​
document.body.appendChild(divEl);
document.body.appendChild(bgDivEl)
document.body.appendChild(imgEl)
​

2.4.5:配置额外参数

const path = require("path")
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
      {
        test:/.(jpe?g|png|gif|svg)$/, 
        use: {
          loader:"file-loader",
          options: {
            //outputPath:"img", //打包出口
            name:"img/[name]-[hash:6].[ext]"  placeholder占位
          }
        }
        {
        test:/.(jpe?g|png|gif|svg)$/, 
        use: {
          loader:"url-loader",
          options: {
            //outputPath:"img", //打包出口
            name:"img/[name]-[hash:6].[ext]"  placeholder占位
          }
        }
      }
    ]
  }
}
//再进行webpack打包

2.5:url-loader

npm i url-loader -D

const path = require("path")
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
        {
        test:/.(jpe?g|png|gif|svg)$/, 
        use: {
          loader:"url-loader",
          options: {
            //outputPath:"img", //打包出口
            name:"img/[name]-[hash:6].[ext]",
            limit:100 * 1024 //小图片才使用url-loader
          }
        }
      }
    ]
  }
}
//再进行webpack打包

2.6:使用 asset module type(必须是webpack5)

• 资源模块类型(asset module type)可以替代以上loader

const path = require("path")
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
       {
         test:/.(jpe?g|png|gif|svg)$/,
         type:"asset",
         generotar: {
           filename:"img/[name]_[hash:6][ext]" //打包出口
         }
         parser: {
           dataUrlCondition: {
             maxSize:100 * 1024 //打包成base 64
           }
         }
       }
      }
    ]
  }
}
//再进行webpack打包

2.5:加载字体文件

2.5.1在element.js中使用字体图标

//element.js
// import "css-loader!../css/style.css";
import "../css/style.css";
import "../css/title.less";
import "../css/image.css"
import "../font/iconfont.css"
//需要让webpack知道图片资源是一个模块方式，要不然只会给src赋值的永远都是字符串
import zzhImg from "../imag/zzh.png"
​
const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊,丢你";
​
const bgDivEl = document.createElement("div");
bgDivEl.className = "image-bg";
​
const imgEl = document.createElement("img")
imgEl.src = zzhImg 
​
const iEl = docuement.createElement("i")
iEl.className = "iconfont icon-ashbin"
  
document.body.appendChild(divEl);
document.body.appendChild(bgDivEl)
document.body.appendChild(imgEl)
document.body.appendChild(iEl)

2.5.2:配置loader

const path = require("path")
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
       {
         test:/.(jpe?g|png|gif|svg)$/,
         type:"asset",
         generotar: {
           filename:"img/[name]_[hash:6][ext]" //打包出口
         }
         parser: {
           dataUrlCondition: {
             maxSize:100 * 1024 //打包成base 64
           }
         }
         //{
           //test:/.eot|ttf|woff2?$/,
           //use: {
             //loader: "file-loader",
             //options: {
              // name:"font/[name]_[hash:6].[ext]"
            // }
         //  }
        // }
         {
           test:/.eot|ttf|woff2?$/,
           type:"asset/resource",
           generator: {
             filename:"font/[name]_[hash:6][ext]"
           }
         }
       }
      }
    ]
  }
}
//再进行webpack打包

2.6:插件Plugin

#安装 clean-webpack-plugin -D
npm install clean-webpack-plugin -D

const path = require("path")
const {CleanWebpackPlugin}  = require("clean-webpack-plugin") //导出的是个类
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"bundle.js"
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
       {
         test:/.(jpe?g|png|gif|svg)$/,
         type:"asset",
         generotar: {
           filename:"img/[name]_[hash:6][ext]" //打包出口
         }
         parser: {
           dataUrlCondition: {
             maxSize:100 * 1024 //打包成base 64
           }
         }
         //{
           //test:/.eot|ttf|woff2?$/,
           //use: {
             //loader: "file-loader",
             //options: {
              // name:"font/[name]_[hash:6].[ext]"
            // }
         //  }
        // }
         {
           test:/.eot|ttf|woff2?$/,
           type:"asset/resource",
           generator: {
             filename:"font/[name]_[hash:6][ext]"
           }
         }
       }
      }
    ]
  }
  plugins:[
    new CleanWebpackPlugin()
  ]
}
//再进行webpack打包

2.6.1:HtmlWebpackPlugin(可以帮忙打包html)

#安装htmlwebpackplugin
npm install html-webpack-plugin -D

const path = require("path")
const {CleanWebpackPlugin}  = require("clean-webpack-plugin") //导出的是个类
const HtmlWebpackPlugin = require("html-webpack-plugin")
​
module.exports = {
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"js/bundle.js" //在这前面加上js/会打包到js文件夹里面而不是外面
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
       {
         test:/.(jpe?g|png|gif|svg)$/,
         type:"asset",
         generotar: {
           filename:"img/[name]_[hash:6][ext]" //打包出口
         }
         parser: {
           dataUrlCondition: {
             maxSize:100 * 1024 //打包成base 64
           }
         }
         //{
           //test:/.eot|ttf|woff2?$/,
           //use: {
             //loader: "file-loader",
             //options: {
              // name:"font/[name]_[hash:6].[ext]"
            // }
         //  }
        // }
         {
           test:/.eot|ttf|woff2?$/,
           type:"asset/resource",
           generator: {
             filename:"font/[name]_[hash:6][ext]"
           }
         }
       }
      }
    ]
  }
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:"./public/index.html" //以什么模版进行打包
    })
  ]
}
//再进行webpack打包

可以先给一个模版,再之后通过htmlwebpackplugin打包后就会把html放在public/index.html中

就不是自动生成,意思总结就是说是通过自己的模版进行html打包

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
​

2.6.2通过defineplugin 获取bash_url

const path = require("path")
const {CleanWebpackPlugin}  = require("clean-webpack-plugin") //导出的是个类
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {DefinePlugins} = require("webpack")
const CopyWebpackPlugin = require("copy-webpack-plugin")
module.exports = {
  mode:"development" //生产模式会使代码看得懂，而不是一堆看不懂的压缩代码
  devtool:"source-map" //映射代码可以直接找出报错代码，而且在浏览器检查中可以看出代码出错的行数，方便调试代码
  entry:"./src/main.js",
  output: {
    path: 绝对路径 path.resolve(__dirname,"./build"),
    filename:"js/bundle.js" //在这前面加上js/会打包到js文件夹里面而不是外面
  }，
  module: {
    //配置规则
    rules:[
      {
        test:/.css$/
        use: [
          "style-loader"
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          "style-loader"
          "css-loader"
          "less-loader"
        ]
      }
       {
         test:/.(jpe?g|png|gif|svg)$/,
         type:"asset",
         generotar: {
           filename:"img/[name]_[hash:6][ext]" //打包出口
         }
         parser: {
           dataUrlCondition: {
             maxSize:100 * 1024 //打包成base 64
           }
         }
         //{
           //test:/.eot|ttf|woff2?$/,
           //use: {
             //loader: "file-loader",
             //options: {
              // name:"font/[name]_[hash:6].[ext]"
            // }
         //  }
        // }
         {
           test:/.eot|ttf|woff2?$/,
           type:"asset/resource",
           generator: {
             filename:"font/[name]_[hash:6][ext]"
           }
         }
       }
      }
    ]
  }
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:"./public/index.html" //以什么模版进行打包
      title："你好" //指向title
    })
    new DefinePlugins({
      BASH_URL:"'./'"
    })
    new CopyWebpackPlugin({ //记得安装copywebpackplugin
      patterns: [
        {
          from: "public",
          to:"./",
          globOptions: {
            ignore: [
              "**/index.html"
            ]
          }
        }
      ]
    })
  ]
}
//再进行webpack打包之后看下图

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="./favicon.ico">
    <title>你好</title>
  <script defer src="js/bundle.js"></script></head>
  <body>
    <noscript>
      <strong>We're sorry but 哈哈哈哈 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
​

2.6.3:设置mode模式webpack是进行如何处理(查看2.6.2的mode设置)

• mode可以设置为development和production分别为以下的图所示