投稿
  1. 极客之音首页
  2. 前端开发

webpack5.x 搭建项目

小半 • • 前端开发 • 阅读 274

webpack5.x 搭建项目

一、做个简单小测试

起步 | webpack 中文文档（基本安装）

npm inityarn add -D webpack webpack-cli创建 src/index.js ，创建 dist

src / index.js;

const showMyAge = () => {
  console.log("1999年出生，今年23岁。");
};

showMyAge();

package.json;


"scripts": {
  "build": "webpack ./src/index.js"
},

接下来，执行 yarn build ，会发现生成了 dist/main.js，这叫打包

二、开始配置 webpack

创建 build/webpack.config.js webpack api

const path = require("path");
module.exports = {
  // 入口文件
  entry: path.resolve(__dirname, "../src/index.js"),
  // 打包输出
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "../dist"),
  },
};

修改 package.json

    "scripts": {
      "build": "webpack --config ./build/webpack.config.js"
    },

三、配置模板（HtmlWebpackPlugin）

管理输出 | webpack 中文文档（设置 HtmlWebpackPlugin）

yarn add html-webpack-plugin -D

  • 创建 public/index.html
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  output: {
    filename: "[name].[hash:8].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
};
  • 多入口文件开发
entry:{
    home: path.resolve(__dirname, '../src/home/index.js'),
    about: path.resolve(__dirname, '../src/about/index.js')
},
plugins: [
    new HtmlWebpackPlugin({
    template: path.resolve(__dirname, '../public/home/index.html') ,
    filename: 'home.html',
    chunks: ['home'],
}),
new HtmlWebpackPlugin({
    template: path.resolve(__dirname, '../public/about/index.html') ,
    filename: 'about.html',
    chunks: ['about'],
}),
]
  • 打包清空原打包文件（Webpack 5 之前）

yarn add clean-webpack-plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  plugins: [new CleanWebpackPlugin()],
};

Webpack 5 清空原打包文件

module.exports = {
  // ...
  output: {
    // ...
    clean: true,
  },
};

四、配置 less & scss

  • 管理资源 | webpack 中文文档（加载 CSS）

yarn add style-loader css-loader less less-loader -D；

  • 先使用 less-loader 将 .less 文件转换成 css，再使用 css-loader 加载 css 文件，最后使用 style-loader 将 css-loader 处理的样式注入到 HTML 页面中。
module.exports = {
  /**
_ test: 正则表达式匹配后缀
_ use: 从右向左解析，如 ['style-loader', 'css-loader'] 先解析 css-loader 再解析 style-loader
*/
  module: {
    rules: [
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

然而，你会发现样式打包到 js 文件里面去了，这显然不符合我们的预期。

五、为 css 添加浏览器前缀

yarn add postcss-loader autoprefixer -D

// build/webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [require("autoprefixer")],
              },
            },
          },
          "less-loader",
        ],
      },
    ],
  },
};

或者

  • 创建 /postcss.config.js

    // postcss.config.js
    module.exports = {
      plugins: [require("autoprefixer")],
    };

  • 修改 / build / webpack.config.js;

    // build/webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /.less$/,
            use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
          },
        ],
      },
    };

六、打包分离 css

前面我们说到，样式被打包到 js 文件里面不是我们想要的，而我们希望得到的是 css 文件，通过 link 标签引入到 html 文件中。

yarn add mini-css-extract-plugin -D

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

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[hash:8].css",
    }),
  ],
};
  1. 这里要注意把 style-loader 去掉，不然会报错，自行验证；
  2. plugins 要写在 module 后面，不然会出错，自行验证。

七、压缩 css

CssMinimizerWebpackPlugin 压缩 CSS 文件

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    plugins: [
     new CssMinimizerWebpackPlugin(),
    ]
})

八、打包图片

管理资源 | webpack 中文文档（加载 images 图像）

Asset Modules ：webpack5 之后就是用这个打包就可以了

module.exports = {
  output: {
    assetModuleFilename: "images/[name].[hash:8].[ext]",
  },
  module: {
    rules: [
      {
        test: /.(png|jpg|jpeg|gif|svg)$/,
        type: "asset/resource",
      },
    ],
  },
};

同样，媒体文件和字体文件也是通过 asset modules 进行打包。

九、配置 babel

yarn add @babel/core @babel/preset-env babel-loader -D

babel：用于转换代码

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

十、DevServer

yarn add webpack-dev-server -DDevServer：配置本地服务器

// package.json
"scripts": {
    "dev": "webpack serve --config ./build/webpack.config.js"
},
// build/webpack.config.js
module.exports = {
  mode: "development",
  /**
    _ devServer: 开发服务器 https: //webpack.docschina.org/configuration/dev-server/
    _ 1. contentBase: 访问打包好的文件夹
    _ 2. host
    _ 3. port: 端口
    _ 4. hot: 是否热加载（ webpack5 内置了热加载） https: //webpack.docschina.org/plugins/hot-module-replacement-plugin/#root
    _ 5. open: 是否打开浏览器
    */
  devServer: {
    contentBase: path.resolve(__dirname, "../dist"),
    host: "127.0.0.1",
    port: 9000,
    hot: true,
    open: true,
  },
};

备注：（2021-09-13）再看 webpack 文档，发现 devServer.contentBase 被删掉，启动报错删除此行无影响。

十一、@ => resolve.alias

  1. 配置 resolve.alias
// build/webpack.config.js
module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
  },
};

```
// src/index.js
// 说明：引入 src/index.less
import '@/index.less';
  1. 配置 jsconfig.json 解决 resolve.alias 跳转问题 问题描述：当然，这个时候你会发现，vscode 点击该路径并不能跳转。

解决办法：根目录下创建 jsconfig.json 文件（在 vue2 项目中测试，vue-cli 搭建的），并写入如下配置

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

十二、关于 jsconfig.json

  1. 什么是 jsconfig.json

    • jsconfig.json 目录中存在文件表明该目录是 JavaScript 我的项目的根目录。
    • jsconfig.json 文件指定了 JavaScript 语言服务提供的性能的根文件和选项。

  2. 为什么我需要一个 jsconfig.json 文件 因为 VsCode 的 JavaScript 支持可以在两种不同的模式下运行:

    • Scope-no jsconfig.json: 文件在这种模式下，在 Visual Studio Code 中打开的 JavaScript 文件被视为独立的单元。只要文件 a.js 没有显式引用文件 b.ts (使用 import 或 CommonJS 模块) ，这两个文件之间就不存在通用的项目上下文。
    • Explicit Project-with jsconfig.json: JavaScript 项目通过 jsconfig.json 文件定义。目录中出现这样的文件表明该目录是 JavaScript 项目的根目录。文件本身可以选择列出属于项目的文件、要从项目中排除的文件以及编译器选项(见下文)。
    • 当工作区中有一个 jsconfig.json 文件来定义项目上下文时，JavaScript 体验会得到改善。出于这个原因，我们提示您在一个全新的工作区中打开一个 JavaScript 文件时创建一个 jsconfig.json 文件。

  3. excludeexc`lude 属性(glob 模式)告诉语言服务哪些文件不是源代码的一部分。这使性能保持在一个高水平。如果 IntelliSense 速度慢，则向排除列表添加文件夹(如果检测到速度慢，VS 代码将提示您这样做)。

{
  "exclude": ["node_modules", "dist"]
}
  1. include include 属性(glob 模式)显式地设置项目中的文件。如果没有 include 属性，则默认情况下包含包含目录和子目录中的所有文件。如果指定了 include 属性，则只包含这些文件。
{
  "include": ["src/**/*"]
}
  1. compilerOptions（Options） 提示: 不要被 compilerOptions 搞糊涂了。这个属性之所以存在，是因为 jsconfig.json 是 tsconfig.json 的后代，后者用于编译打字稿。

属性 描述

  • nolib 不要包含默认的库文件(lib.d.ts)
  • target 指定要使用的默认库(lib.d.ts)。值为 “es3”, “es5”, “es6”, “es2015”, “es2016”, “es2017”, “es2018”, “es2019”, “es2020”, “esnext”.
  • module 在生成模块代码时指定模块系统。值为“ amd”、“ commonJS”、“ es2015”、“ es6”、“ esnext”、“ none”、“ system”、“ umd”
  • moduleResolution 指定如何解析导入模块。值为“node”和“classic”
  • checkJs 启用 JavaScript 文件的类型检查
  • experimentalDecorators 为提议的 ES 装饰器提供实验支持
  • allowSyntheticDefaultImports 允许从没有默认导出的模块进行默认导入。这不影响代码，只是进行类型检查
  • baseUrl 解析非相关模块名称的基础目录
  • paths 指定相对于 baseUrl 选项计算的路径映射
  • 可以在 TypeScript compilerOptions documentation.文档中了解有关可用 compilerOptions 的更多信息。

十三、关于 mode

yarn / npm ：前面已经提到 webpack 的 mode

-D 等价于 –save-dev; 开发环境时所需依赖 -S 等价于 –save; 生产环境时所需依赖

十四、使用 typescript

yarn add typescript ts-loader -D

tsc --init 初始化生成 tsconfig.json

// build/webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.ts$/,
        use: "ts-loader",
      },
    ],
  },
};

十五、使用 source map

  • 开发环境 | webpack 中文文档（使用 source map）
module.exports = {
  devtool: "inline-source-map",
};

配置之后，在浏览器 DevTools -> Sources 中可以看到项目代码；

方便代码审查、断点查 Bug。

十六、服务端渲染（webpack-dev-middleware）

开发环境 | webpack 中文文档（使用 webpack-dev-middleware） 搭建 SSR

webpack 5

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  /**
   * mode: 模式
   * 1. development: 开发模式
   * 2. production: 生产模式
   * 3. package.json script 可以设置 --mode=development 打包或启动命令
   * 4. 更多可查阅 https: //webpack.js.org/configuration/mode/#root
   */
  mode: "development",
  /**
   * devServer: 开发服务器 https: //webpack.docschina.org/configuration/dev-server/
   * 1. contentBase: 访问打包好的文件夹
   * 2. host
   * 3. port: 端口
   * 4. hot: 是否热加载（ webpack5 内置了热加载） https: //webpack.docschina.org/plugins/hot-module-replacement-plugin/#root
   * 5. open: 是否打开浏览器
   */
  devServer: {
    contentBase: path.resolve(__dirname, "../dist"),
    host: "127.0.0.1",
    port: 9000,
    hot: true,
    open: true,
  },
  /**
   * entry: webpack 开始构建包的入口
   * 1. 更多可查阅 https: //webpack.js.org/configuration/entry-context/#entry
   */
  entry: path.resolve(__dirname, "../src/index.js"),
  /**
   * 为了更容易地追踪错误和警告， JavaScript 提供了 source map 功能， 将编译后的代码映射回原始源代码。
   * https: //www.webpackjs.com/guides/development/
   */
  devtool: "inline-source-map",
  /**
   * output: 打包输出配置
   * 1. 更多可查阅 https: //webpack.js.org/configuration/output/
   */
  output: {
    filename: "[name].[hash:8].js",
    path: path.resolve(__dirname, "../dist"),
    assetModuleFilename: "images/[name].[hash:8].[ext]",
  },
  /**
   * module
   */
  module: {
    rules: [
      {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
      {
        test: /.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /.(png|jpg|jpeg|gif)$/,
        type: "asset/resource",
      },
    ],
  },
  /**
   * plugins
   */
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:8].css",
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
  },
};

webpack5.x 搭建项目

【今日美图】小荷才露尖尖角

原文始发于微信公众号（前端解码）：webpack5.x 搭建项目

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/50019.html

赞 (0)
小半的头像小半
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！