Python从入门到放弃系列教程01-CFANZ编程社区

1、了解 webpack

2、使用 webpack

3、修改 Webpack 打包出入口

1）项目根目录，新建 webpack.config.js 配置文件

2）导出配置对象，配置入口，出口文件的路径

3）重新打包观察注意：只有和入口产生直接/间接的引入关系，才会被打包

4）打包后的 js 文件，例子如下【我用了自动换行，让你们看清楚】

4、webpack 打包输出 index.html 文件

1）安装对应的包

    npm install html-webpack-plugin --save-dev

2）在 webpack.config.js 中配置

3）重新打包观察

4）打包后的 html 文件，例子如下【我用了自动换行，让你们看清楚】

5、webpack 打包 css 代码【js 文件中】

1）准备 css 文件代码引入到 src 文件夹中

2）准备 css 代码，并引入到 js 中【没错，就是引入 js 文件中】

2）下载 css-loader 和 style-loader 本地软件包

  同时，下载两个加载器
    npm i css-loader style-loader --save-dev

3）配置 webpack.config.js 让 Webpack 拥有该加载器功能

module.exports = {
  module: {
    rules: [
      {
        // 匹配 css 文件，/i 就是 无论后缀大小写
        test: /\.css$/i,
        // 使用 这两个加载器，注意，它是从最后一个元素【这里是css-loader】开始使用，顺序不能改变
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

4）重新打包观察

6、webpack 打包 css 代码【css 文件中】

1、下载 mini-css-extract-plugin 本地软件包

    npm install mini-css-extract-plugin --save-dev

2、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,

        // 注意：style-loader 和 MiniCssExtractPlugin.loader 不能同时使用
        // use: ['style-loader', "css-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3、打包后观察效果

7、webpack 打包 css 代码【压缩 css 代码】

1、下载 css-minimizer-webpack-plugin 本地软件包

    npm install css-minimizer-webpack-plugin --save-dev

2、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`）
      `...`, // 保留这个，就是使 js 代码打包后，还能压缩
      new CssMinimizerPlugin(),
    ],
  }
};;

3、打包后观察效果

8、webpack 打包 less 代码

1、下载 less less-loader 本地软件包

     npm install less less-loader --save-dev

2、新建 less 代码（设置背景图）并引入到 index.js 中

3、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          MiniCssExtractPlugin.loade,
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

4、打包后观察效果

9、webpack 打包图片

1、配置 webpack.config.js 让 Webpack 拥有打包图片功能

1）占位符【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

2）占位符【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

3）占位符【query】保留引入文件时代码中查询参数（只有 URL 下生效）

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ],
  },
};

2、打包后观察效果和区别

1）大于 8KB 文件：发送一个单独的文件并导出 URL 地址【打包输出图片】

2）小于 8KB 文件：导出一个 data URI（base64字符串）【打包后转为base64字符串】

10、webpack 搭建开发环境

1、下载 webpack-dev-server 软件包到当前项目

    npm i webpack-dev-server--save-dev

2、设置模式为开发模式，并配置自定义命令

3、使用 npm run dev 来启动开发服务器，试试热更新效果

11、webpack 的打包模式

1、在 webpack.config.js 配置文件设置 mode 选项

2、在 package.json 命令行设置 mode 参数

12、webpack 打包模式的应用

方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

1、下载 cross-env 软件包到当前项目

    npm i cross-env --save-dev

2、配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

当你运行对应命令 npm run build 或者dev 时，根据 pageage.json 的 NODE_ENV=？？，执行

cross-env ：固定

NODE_ENV=production  ：自定义的，也可以直接写 a=b，但是为了语义化点

3、在 webpack.config.js 区分不同环境使用不同配置

process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader

process.env ：固定的，通过这个调用 我们定义的值

13、前端-注入环境变量

plugins: [
    new webpack.DefinePlugin({
      // 就是，在 前端项目 某个js文件 中，遇见 process.env.NODE_ENV 就赋值 给 模式对应的值
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],

14、开发环境调错 - source map

const config = {
  ...
}

// 开发环境下使用 sourcemap 选项
if (process.env.NODE_ENV === 'development') {
  config.devtool = 'inline-source-map'
}

module.exports = config

15、解析别名 alias 【用 @ 来代表 src 绝对路径】

module.exports = {
  //...
  resolve: {
    // __dirname 获取的是 webpack.config.js 所在文件夹的绝对路径
    '@': path.resolve(__dirname, 'src')
  },
};

16、开发模式使用 npm 下载包 || 生产模式使用 CDN 引用

1、在 html 中引入第三方库的 CDN 地址 并用模板语法判断

下面这个是 htmlWebpackPlugin 规定的用法，我们后面在 options 定义 useCdn 的值 判断就行

<% if(htmlWebpackPlugin.options.useCdn){ %>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">

<% } %>

2、配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

const config = {
 plugins: [
    new HtmlWebpackPlugin({
      useCdn: process.env.NODE_ENV === 'production', // 生产模式下使用 cdn 引入的地址
    }),
 ]
}

// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让 webpack 防止 import 的包被打包进来）
  config.externals = {
    // key：import from 语句后面的字符串
    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios',
  }
}

module.exports = config