學習筆記13（webpack進階1）

webpack進階

• • • 自動清理建構目錄
    • postcss插件自動補全功能
    • px 轉為 rem
    • 多頁面打包
    • sourcemap
    • • 使用 sourceURL 解決 eval字元串代碼不能調試的問題
      • webapck之devtool

自動清理建構目錄

• 檔案指紋政策：https://juejin.cn/post/6844903935812059144
• 使用 clean-webpack-plugin 插件
• 測試代碼: https://github.com/baixc1/csdn/tree/master/note/note13/clean-demo

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  mode: "production", // 如果不添加就會警告
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].[chunkhash:8].js" // 出口檔案
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
}
           

postcss插件自動補全功能

• postcss 通過 js 插件轉換 css
• autoprefixer 添加浏覽器字首，通過 Can I Use
• postcss-preset-env 轉換css
  • 内部使用 autoprefixer
  • browsers 指定支援的浏覽器範圍, 可配置 postcss.config.js
• 實際效果

  

• 參考連結
  • https://www.npmjs.com/package/postcss-preset-env
  • https://webpack.js.org/loaders/postcss-loader/
• 測試代碼: https://github.com/baixc1/csdn/tree/master/note/note13/postcss-autoprefixer-demo

// src/index.js
import './file.css'
// src/file.css
div{
    display: flex;
}

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      browsers: 'last 2 versions',
                      // autoprefixer: false, // 預設true, false則不轉換
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
           

px 轉為 rem

• lib-flexible 計算 html元素 fontSize , 寬 375px 下為 37.5(1rem = 37.5px)
• px2rem-loader 将 css 檔案中的 px 轉換為 rem
  • remUnit， 1個 rem 對應的 px 數
  • 寬 750px 設計稿，1rem = 75px
• hmtl中引入 lib-flexible 資源

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 75,
              remPrecision: 8
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, `src/index.html`)
    })
  ]
}
           

• 參考連結
  • https://github.com/Jinjiang/px2rem-loader/tree/master/examples
• 測試代碼: https://github.com/baixc1/csdn/tree/master/note/note13/px2rem

多頁面打包

配置多個入口，多個htmlWebpackPlugins。使用 chunks 指定HTML使用的 chunk

不指定chunks問題：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const glob = require("glob");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const entry = {};
const htmlWebpackPlugins = [];

glob.sync(path.join(__dirname, "./src/*/index.js")).forEach((url) => {
  const match = url.match(/src\/(.*)\/index\.js/);
  const pageName = match && match[1];

  entry[pageName] = path.join(__dirname, `src/${pageName}`);
  htmlWebpackPlugins.push(
    new HtmlWebpackPlugin({
      filename: `${pageName}.html`,
      template: path.join(__dirname, `src/${pageName}/index.html`),
      chunks: [pageName], // 使用的 chunks，預設 all
      inject: "head", // 注入位置
    })
  );
});

module.exports = {
  entry,
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name]_[chunkhash:8].js",
  },
  plugins: [new CleanWebpackPlugin(), ...htmlWebpackPlugins],
};
           

• 參考連結
  • https://www.npmjs.com/package/html-webpack-plugin
• 測試代碼: https://github.com/baixc1/csdn/tree/master/note/note13/multiple-pages1

sourcemap

使用 sourceURL 解決 eval字元串代碼不能調試的問題

調式 eval 函數和 Function 函數的動态代碼，通過 sourceURL生成指定檔案

// index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="foo">foo</button>
  <button id="foo2">foo2</button>
  <script>
    var script = `function foo() {
      alert('called foo');
    }
    //# sourceURL=my-foo.js`;

    var script2 = `function foo2() {
      alert('called foo2');
    }
    //# sourceURL=my-foo2.js`;

    eval(script);
    eval(script2)

    var button = document.getElementById("foo");
    button.addEventListener("click", foo, false);

    var button = document.getElementById("foo2");
    button.addEventListener("click", foo2, false);
  </script>
</body>

</html>
           

• 效果圖

  

webapck之devtool

• eval：eval 模式會把每個 module 封裝到 eval 裡包裹起來執行

(() => {
  eval("document.write('search')\n\n//# sourceURL=webpack://note12/./src/search/index.js?")
})();
           

• source-map
  • 源碼轉換：壓縮減少體積；合并檔案，減少 http 請求；代碼轉化。不利于代碼調試。
  • source map：資訊檔案，儲存位置資訊，可定位錯誤的源碼位置。
  • 生成 map 映射檔案

// xx.js
document.write("search");
//# sourceMappingURL=search_516cb46c.js.map

// xx.js.map
{
  "version": 3,
  "sources": [
    "webpack://note12/./src/search/index.js"
  ],
  "names": [
    "document",
    "write"
  ],
  "mappings": "AAAAA,SAASC,MAAM",
  "file": "search_516cb46c.js",
  "sourcesContent": [
    "document.write('search')"
  ],
  "sourceRoot": ""
}
           

• hidden-source-map：無sourceMappingURL，有map檔案
• inline-source-map： 作為 DataURL 的形式被内嵌進了 bundle 中
• cheap-source-map：與 source-map類似，sourceMap資訊中缺少列資料
• 參考連結
  • https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources
  • https://juejin.cn/post/6844903450644316174
  • https://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
• 測試代碼: https://github.com/baixc1/csdn/tree/master/note/note13/devtool