学习笔记13（webpack进阶1）

最新推荐文章于 2022-03-16 19:52:10 发布

weixin_41837346

最新推荐文章于 2022-03-16 19:52:10 发布

阅读量170

点赞数

分类专栏：前端工程化文章标签： webapck

本文链接：https://blog.csdn.net/weixin_41837346/article/details/110958708

版权

前端工程化专栏收录该内容

13 篇文章 0 订阅

订阅专栏

webpack进阶

自动清理构建目录

文件指纹策略：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://github.com/baixc1/csdn/tree/master/note/note13/devtool

weixin_41837346

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记13（webpack进阶1）

webpack进阶自动清理构建目录自动清理构建目录文件指纹策略：https://juejin.cn/post/6844903935812059144使用 clean-webpack-plugin 插件// webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plugin');const path = require('path');module.exports = { mode: "produc
复制链接

扫一扫

专栏目录