Webpack配置实战

最新推荐文章于 2023-12-25 00:04:00 发布
最新推荐文章于 2023-12-25 00:04:00 发布
阅读量234 收藏
点赞数
文章标签： webpack npm javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Android_boom/article/details/128789152
版权

前言

本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。

一、基础配置

接下来一起配置一个基础的 Webpack。

将支持以下功能：

  • 分离开发环境、生产环境配置；
  • 模块化开发；
  • sourceMap 定位警告和错误；
  • 动态生成引入 bundle.js 的 HTML5 文件；
  • 实时编译；
  • 封装编译、打包命令。

1. 新建项目

新建一个空项目：

// 新建 webpack-demo 文件夹
mkdir webpack-demo

// 进入 webpack-demo 目录
cd ./webpack-demo

// 初始化项目
npm init -y

新建 2 个 js 文件，并进行模块化开发：

// 进入项目目录
cd ./webpack-demo

// 创建 src 文件夹
mkdir src

// 创建 js文件
touch index.js
touch hello.js

index.js：

// index.js

import './hello.js'

console.log('index')

hello.js：

// hello.js
console.log('hello webpack')

项目结构如下：

- src- index.js- hello.js
- package.json
- node_modules

2. 安装

1.安装 Node

Node 需要是最新版本，推荐使用 nvm 来管理 Node 版本。

将 Node.js 更新到最新版本，也有助于提高性能。除此之外，将你的 package 管理工具（例如 npm 或者 yarn）更新到最新版本，也有助于提高性能。较新的版本能够建立更高效的模块树以及提高解析速度。

我安装的版本信息如下：

  • node v14.17.3* npm v6.14.13)2.安装 webpack
npm install webpack webpack-cli --save-dev

3. 新建配置文件

development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。为代码清晰简明，为每个环境编写彼此独立的 webpack 配置。

// 进入项目目录
cd ./webpack-demo

// 创建 config 目录
mkdir config

// 进入 config 目录
cd ./config

// 创建通用环境配置文件
touch webpack.common.js

// 创建开发环境配置文件
touch webpack.dev.js

// 创建生产环境配置文件
touch webpack.prod.js

webpack-merge

使用 webpack-marge 合并通用配置和特定环境配置。

安装 webpack-merge：

npm i webpack-merge -D

通用环境配置：

// webpack.common.js

module.exports = {} // 暂不添加配置

参考 webpack面试题详细解答

开发环境配置：

// webpack.dev.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {}) // 暂不添加配置

生产环境配置：

// webpack.prod.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {}) // 暂不添加配置

项目结构如下：

- config- webpack.common.js- webpack.dev.js- webpack.prod.js
- src- index.js- hello.js
- package.json
- node_modules

4. 入口（entry）

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

在本例中，使用 src/index.js 作为项目入口，webpack 以 src/index.js 为起点，查找所有依赖的模块。

修改 webpack.commom.js：

module.exports = merge(common, {// 入口entry: {index: './src/index.js',},
})

5. 输出（output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

生产环境的 output 需要通过 contenthash 值来区分版本和变动，可达到清缓存的效果，而本地环境为了构建效率，则不引人 contenthash。

新增 paths.js，封装路径方法：

const fs = require('fs')
const path = require('path')

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {resolveApp,appPublic: resolveApp('public'),appHtml: resolveApp('public/index.html'),appSrc: resolveApp('src'),appDist: resolveApp('dist'),appTsConfig: resolveApp('tsconfig.json'),
}

修改开发环境配置文件 webpack.dev.js：

module.exports =merge(common, {// 输出output: {// bundle 文件名称filename: '[name].bundle.js',// bundle 文件路径path: resolveApp('dist'),// 编译前清除目录clean: true},
})

修改生产环境配置文件 webpack.prod.js：

module.exports =merge(common, {// 输出output: {// bundle 文件名称 【只有这里和开发环境不一样】filename: '[name].[contenthash].bundle.js',// bundle 文件路径path: resolveApp('dist'),// 编译前清除目录clean: true},
})

上述 filename 的占位符解释如下：

  • [name] - chunk name（例如 [name].js -> app.js）。如果 chunk 没有名称，则会使用其 id 作为名称
  • [contenthash] - 输出文件内容的 md4-hash（例如 [contenthash].js -> 4ea6ff1de66c537eb9b2.js）

6. 模式（mode）

通过 mode 配置选项，告知 webpack 使用相应模式的内置优化。

选项描述
development会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
production会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin 。

修改开发环境配置文件 webpack.dev.js：

module.exports =merge(common, {// 开发模式mode: 'development',
})

修改生产环境配置文件 webpack.prod.js：

module.exports =merge(common, {// 生产模式mode: 'production',
})

7. Source Map

当 webpack 打包源代码时，可能会很难追踪到 error 和 warning 在源代码中的原始位置。

为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以将编译后的代码映射回原始源代码。

修改开发环境配置文件 webpack.dev.js：

module.exports =merge(common, {// 开发工具，开启 source map，编译调试devtool: 'eval-cheap-module-source-map',
})

source map 有许多 可用选项。本例选择的是 eval-cheap-module-source-map

注：为加快生产环境打包速度，不为生产环境配置 devtool。

完成上述配置后，可以通过 npx webpack --config config/webpack.prod.js 打包编译。

编译后，会生成这样的目录结构：

8. HtmlWebpackPlugin

npx webpack --config config/webpack.prod.js 后仅生成了 bundle.js，我们还需要一个 HTML5 文件，用来动态引入打包生成的 bundle 文件。

引入 HtmlWebpackPlugin 插件，生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。

安装：

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

修改通用环境配置文件 webpack.commom.js：

module.exports = {plugins: [// 生成html，自动引入所有bundlenew HtmlWebpackPlugin({title: 'release_v0',}),],
}

重新 webpack 编译 npx webpack --config config/webpack.prod.js，生成的目录结构如下：

新生成了 index.html，动态引入了 bundle.js 文件：

<!DOCTYPE html>
<html>
 <head><meta charset="utf-8" /><title>release_v0</title><meta name="viewport" content="width=device-width,initial-scale=1" /><script defer="defer" src="index.468d741515bfc390d1ac.bundle.js"></script>
 </head>
 <body></body>
</html>

9. DevServer

在每次编译代码时，手动运行 npx webpack --config config/webpack.prod.js 会显得很麻烦，webpack-dev-server 帮助我们在代码发生变化后自动编译代码。

webpack-dev-server 提供了一个基本的 web server，并且具有实时重新加载功能。

webpack-dev-server 默认配置 conpress: true，为每个静态文件开启 gzip compression。

安装：

npm install --save-dev webpack-dev-server

修改开发环境配置文件 webpack.dev.js：

module.exports = merge(common, {devServer: {// 告诉服务器从哪里提供内容，只有在你想要提供静态文件时才需要。contentBase: './dist',},
})

完成上述配置后，可以通过 npx webpack serve --open --config config/webpack.dev.js 实时编译。

效果如图：

10.执行命令

上述配置文件完成后，优化 webpack 的实时编译、打包编译指令。

通过 cross-env 配置环境变量，区分开发环境和生产环境。

安装：

npm install --save-dev cross-env

修改 package.json：

{"scripts": {"dev": "cross-env NODE_ENV=development webpack serve --open --config config/webpack.dev.js","build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js"},
}

现在可以运行 webpack 指令：

  • npm run dev：本地构建；
  • npm run build：生产打包。

以上我们完成了一个基于 webpack 编译的支持模块化开发的简单项目。

二、进阶配置

本章节将继续完善配置，在上述配置基础上，用 Webpack 搭建一个 SASS + TS + React 的项目。

将支持以下功能：

  • 加载图片；
  • 加载字体；
  • 加载 CSS；
  • 使用 SASS；
  • 使用 PostCSS，并自动为 CSS 规则添加前缀，解析最新的 CSS 语法，引入 css-modules 解决全局命名冲突问题；
  • 使用 React；
  • 使用 TypeScript。

1. 加载图片（Image）

在 webpack 5 中，可以使用内置的 Asset Modules，将 images 图像混入我们的系统中。

修改通用环境配置文件 webpack.commom.js：

const paths = require('./paths');
module.exports = {module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,include: paths.appSrc,type: 'asset/resource',},],},
}

在实际开发过程中，推荐将大图片上传至 CDN，提高加载速度。

2. 加载字体（Font）

使用 Asset Modules 接收字体文件。

修改通用环境配置文件 webpack.commom.js：

module.exports = {module: {rules: [{ test: /.(woff|woff2|eot|ttf|otf)$/i, include: [resolveApp('src'),], type: 'asset/resource', }, ] }
 }

在这里我发现，我不新增对 ttf 文件的配置，也能够引入字体不报错，不知道是什么问题，先记录一下，有知道原因的大佬移步评论区。

在实际开发过程中，推荐将字体文件压缩上传至 CDN，提高加载速度。如配置字体的文字是固定的，还可以针对固定的文字生成字体文件，可以大幅缩小字体文件体积。

3. 加载 CSS

为了在 JavaScript 模块中 import 一个 CSS 文件，需要安装并配置 style-loader 和 css-loader。

3.1 style-loader

style-loader 用于将 CSS 插入到 DOM 中，通过使用多个 <style></style> 自动把 styles 插入到 DOM 中.

3.2 css-loader

css-loader 对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样，让 CSS 也能模块化开发。

3.3 安装配置

安装 CSS 相关依赖：

npm install --save-dev style-loader css-loader

修改通用环境配置文件 webpack.commom.js：

const paths = require('./paths');
module.exports = {module: {rules: [{test: /\.css$/,include: paths.appSrc,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',],},]}}

4. 使用 SASS

4.1 Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量、嵌套、混合、导入等高级功能。

4.2 sass-loader

sass-loader 加载 Sass/SCSS 文件并将他们编译为 CSS。

4.3 安装配置

安装 SASS 相关依赖：

npm install --save-dev sass-loader sass

修改通用环境配置文件 webpack.commom.js：

const paths = require('./paths');
module.exports = {module: {rules: [{test: /.(scss|sass)$/,include: paths.appSrc,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',// 将 Sass 编译成 CSS'sass-loader',],},

5. 使用 PostCSS

5.1 PostCSS

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。

  • 可以自动为 CSS 规则添加前缀；
  • 将最新的 CSS 语法转换成大多数浏览器都能理解的语法；
  • css-modules 解决全局命名冲突问题。

5.2 postcss-loader

postcss-loader 使用 PostCSS 处理 CSS 的 loader。

5.3 安装配置

安装 PostCSS 相关依赖：

npm install --save-dev postcss-loader postcss postcss-preset-env

修改通用环境配置文件 webpack.commom.js：

const paths = require('./paths');
module.exports = {module: {rules: [{test: /\.module\.(scss|sass)$/,include: paths.appSrc,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块{loader: 'css-loader',options: {// Enable CSS Modules featuresmodules: true,importLoaders: 2,// 0 => no loaders (default);// 1 => postcss-loader;// 2 => postcss-loader, sass-loader},},// 将 PostCSS 编译成 CSS{loader: 'postcss-loader',options: {postcssOptions: {plugins: [[// postcss-preset-env 包含 autoprefixer'postcss-preset-env',],],},},},// 将 Sass 编译成 CSS'sass-loader',],},],},
}

为提升构建效率，为 loader 指定 include，通过使用 include 字段，仅将 loader 应用在实际需要将其转换的模块。

5. 使用 React + TypeScript

为了让项目的配置灵活性更高，不使用 create-reate-app 一键搭建项目，而是手动搭建 React 对应的配置项。

安装 React 相关：

npm i react react-dom @types/react @types/react-dom -D

安装 TypeScript 相关：

npm i -D typescript esbuild-loader

为提高性能，摒弃了传统的 ts-loader，选择最新的 esbuild-loader。

修改通用环境配置文件 webpack.commom.js：

const paths = require('./paths');
 module.exports = {resolve: {extensions: ['.tsx', '.ts', '.js'],},module: {rules: [{test: /\.(js|ts|jsx|tsx)$/,include: paths.appSrc,use: [{loader: 'esbuild-loader',options: {loader: 'tsx',target: 'es2015',},}]}, ] }
 }

TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通 JavaScript 代码。

为兼容 TypeScript 文件，新增 typescript 配置文件 tsconfig.json：

{"compilerOptions": {"outDir": "./dist/","noImplicitAny": true,"module": "es6","target": "es5","jsx": "react","allowJs": true,"moduleResolution": "node","allowSyntheticDefaultImports": true,"esModuleInterop": true,}
}

如果想在 TypeScript 中保留如import _ from 'lodash';的语法被让它作为一种默认的导入方式，需要在文件 tsconfig.json 中设置 "allowSyntheticDefaultImports" : true 和 "esModuleInterop" : true 。

注意：这儿有坑

1. "allowSyntheticDefaultImports": true 配置

TypeScript 配置文件 tsconfig.json 需要加 "allowSyntheticDefaultImports": true 配置，否则会提示 can only be default-imported using the 'allowSyntheticDefaultImports' flag。

{"compilerOptions": {"allowSyntheticDefaultImports": true},
}
2. tsx 和 jsx 不能混合使用

在 tsx 中引入 jsx 文件报错如下：

以上我们完成了一个基于 webpack 编译的 SASS + TS + React 项目。

三、总结

本文从 Webpack 基础配置、Webpack 进阶配置 2 个角度进行讲述，从 Webpack 实践着手，和你一起了解 Webpack。

希望能对你有所帮助，感谢阅读～

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴，可以点击下方卡片领取，无偿分享

Web_boom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack配置全解析（基础篇）
2401_84435152的博客
04-29 1524
我们也可以在项目目录新建一个html引入打包后的bundle.js文件查看效果。配置文件命令行的打包方式仅限于简单的项目，如果我们的项目较为复杂，有多个入口，我们不可能每次打包都把入口记下来；因此一般项目中都使用配置文件来进行打包；
Webpack的打包大小和CSS style sass配置即优化
蜡笔小开心❤的博客
08-15 442
Webpack的打包大小和CSS style sass配置即优化
webpack配置scss loader
liyananweb的博客
11-30 2153
请记住，这些配置可能需要根据你的具体项目需求进行调整。如果你使用的是如 Create React App 或 Next.js 这样的构建工具，它们可能已经内置了对 Sass 的支持，你可能不需要手动更改 Webpack 配置。如果你想使用 CSS Modules（这允许你将 CSS 类名局部化，以避免全局冲突），你可以调整。如果你想将 CSS 提取到单独的文件中，而不是将它们注入到 JavaScript 中，你可以使用。文件中，你需要添加一个规则来告诉 Webpack 如何处理。的替代品，更快且更可靠）。
webpack配置
热门推荐
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
解决WARNING in configuration The ‘mode‘ option has not been set, webpack will fallback to ‘production‘
sonsmart的博客
06-09 1739
安装好webpack后，运行webpack打包时会出现报错：WARNING in configuration The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment. You can also set it
react项目中在webpack配置sass
skybulex的博客
07-13 1173
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.module.rules[1].oneOf[10] has an unknown property 'loaders'. These properties are valid: object { assert?, compi
webpack的配置和插件的使用介绍代码
12-25
四、Webpack 配置实战 以 `webpack-demo` 为例，这个示例项目可能包含以下配置： 1. 入口文件 `src/index.js`，作为Webpack的起始点。 2. 输出配置，指定打包后的文件保存在 `dist` 目录下，如 `output.path: path....
webpack3.0基础配置项目
07-11
四、Webpack 配置实战 在 `webpack-3.0-demo` 项目中，你可以看到实际的配置文件和项目结构，包括入口文件、输出配置、loader 和 plugin 的应用。通过实践这个项目，你可以更好地理解每个配置项的作用，并学会如何...
一次Webpack配置文件的分离实战记录
12-09
前言 随着前端技术的发展，业务逻辑的增多及功能化的繁琐已经成为前端人员最烧脑...webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。 下面话不多说了，来一起看看详细的介绍吧 单个
webpack4.0配置
01-08
Webpack 4.0 是一个强大的模块打包工具，用于将JavaScript应用程序的多种资源（如JavaScript、CSS、图片等）转换和打包成可...通过理解和实践这些知识点，你可以根据自己的项目需求来构建高效、可维护的Webpack配置。
Webpack全面实战企业级项目搭建视频.zip
07-06
06_2_5_webpack的基础配置 07_2_6_将webpack命令配置到package_json 08_2_7_watch模式 09_2_8_webpack_dev_server的基本使用 10_2_9_html_webpack_plugin的使用_html插件_ 11_2_10_webpack_dev_middleware的...
webpack支持scss文件，webpack sass配置
weixin_46787337的博客
07-12 1186
注意：这里是个坑，如果你在前端项目上配置webpack一定要安装的是而不是,这两个依赖不要同时装，同时装的话webpack优先使用那么就会报错
webpack初始化与基本配置
最新发布
xin_jiao的博客
12-25 924
文件夹，然后在阿里巴巴矢量图标库中下载图标（这里使用 Font class 的使用方式），将下载的字体文件放到。webpack 的打包环境，需要打包的文件等，这 样每次打包都要输入很长的命令，非常麻烦。，所以就需要在原有的基础上 新增一个 webpack 的配置文件，在项目根目录新增一个。main.js 文件（这是 默认行为，可以指定打包后的位置和文件名称），所以还需要在。webpack，然后传入需要打包的文件就可以了。webpack 的执行依赖， 能够命令式的执行。
webpack处理样式资源（css less sass scss）
jieyucx的博客
06-07 1470
本身是不能识别样式资源的，所以我们需要借助Loader来帮助解析样式资源。
webpack基础配置
m0_61852712的博客
10-11 446
webpack基础配置
webpack配置完全指南
JackChan
10-26 2618
webpack配置完全指南
Webpack入门与实战指南
14. **开发实战**：从零开始，逐步介绍如何使用Webpack进行项目设置，包括项目的初始化、Webpack的安装与配置，以及实际的模块打包过程。 通过阅读这本书，读者不仅可以掌握Webpack的基础知识，还能提升前端项目的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值