webpack 之 webpack.config.js配置詳解

/**
 * 生成package.json: npm init
 * 需要安裝的包:npm install webpack webpack-cli style-loader css-loader less-loader sass-loader url-loader file-loader html-loader html-webpack-plugin webpack-dev-server -D
 *
 * webpack的配置文件
 * 作用：指示webpack 干哪些活（當運行指令時會加載里面的配置）
 * 默認采用 common.js
 * 
 * loader :1.下載  2.使用（配置loader）
 * plugins: 1. 下載 2.引入 3.使用
 *  */

 //resolve用來拼接絕對路徑的方法
 const { resolve } = require('path');
 const HTMLWebpackPlugin =require('html-webpack-plugin')

 module.exports ={
   //入口
   entry:'./src/index.js',
   //輸出
   output: {
     //輸出文件名
     filename:'js/build.js',
     //輸出路徑
     //__dirname node.js的變量，代表當前文件的絕對路徑
     path:resolve(__dirname,'build')
   },
   //loader的配置
   module:{
     rules: [
      //詳細的load配置
      {
        //匹配哪些文件
        test:/\.css$/,
        use: [
          //use數組中loader執行順序：從右到左，從下到上 依次執行
          //創建style標簽，將js中的樣式資源插入進行，添加到head中生效
          'style-loader',
          //將CSS文件變成commonjs模塊加載js中，里面內容是樣式字符串
          'css-loader',
        ]
      },
      {
        //匹配哪些文件
        test:/\.less$/,
        use: [
          //use數組中loader執行順序：從右到左，從下到上 依次執行
          //創建style標簽，將js中的樣式資源插入進行，添加到head中生效
          'style-loader',
          //將CSS文件變成commonjs模塊加載js中，里面內容是樣式字符串
          'css-loader',
          //將less文件轉為css文件
          'less-loader'
        ]
      },
      {
        //匹配哪些文件
        test:/\.(jpg|png|gif)$/,
        //安裝 url-loader file-loader
        loader:'url-loader',
        options: {
          //圖片大小小於8kb,就會被base64處理
          //優點：減少請求數量，減輕服務器壓力
          //缺點：圖片體積會更大，文件請求速度更慢。
          limit:8*1024,
          //url-loader默認使用ES6模塊化解析，而html-loader引入圖片時commonjs
          //解析時會出問題：[object Moudle]
          //解決：關閉url-loader的ES6模塊化，使用commonjs解析
          esModule:false,
          //給圖片重命名
          //[hash:10]取圖片hash的前十位
          //[ext]取文件原來的擴展名
          name:'[hash:10].[ext]',
　　　　　　outputPath:'imgs'//配置輸出路徑
        }
      },
　　　 {//匹配其他文件

　　　　　　exclude:/\.(css|html|js|jpg|png|gif|less|sass)$/,

          loader:'file-loader',

          options:{

             name:'[hash:10].[ext]',

　　　　　　　　outputPath:'media' //配置輸出文件夾

          }

　　   }，
      {
        //處理html文件的img圖片
        test:/\.html$/,
        loader:'html-loader'
      },
     ]
   },
   plugin: [
     //詳細的plugin配置
     new HTMLWebpackPlugin({
       //復制 ./src/index.html 文件，並自動引入打包輸出所有資源（JS/CSS）
       template: './src/index.html'
     })
   ],
   //模式
   mode: 'development',
  //  mode: 'production',
  //開發服務器 devServer:用來自動化(自動編譯,自動打開瀏覽器，自動刷新瀏覽器~~~)
  //特點：只會在內存中編譯打包，不會有任何輸出
  //啟動devServer指令為：webpack-dev-server
  devServer:{
    contentBase:resolve(__dirname,'build'),//自動構建目錄，打包后的文件夾絕對路徑 //啟動gzip壓縮
    compress:true,
    //端口號
    port:3000,
    //自動打開瀏覽器
    open:true
  }
 }

 在package.json配置啟動腳本，原來啟動命令是npx webpack-dev-server，配置后通過npm run dev 也可啟動

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"npx webpack-dev-server"
  },