Webpack 是一个现代化的 JavaScript 应用程序打包器,它主要用于打包前端代码资源,例如 JS 文件、CSS 文件、图片等,然后生成可以在浏览器中运行的静态资源。 Webpack 采用模块化的方式进行打包,可以将多个 JavaScript 模块合并成一个文件,减少 HTTP 请求,提升网站性能。同时,Webpack 支持各种类型的加载器和插件,可以通过加载器将 Webpack 能够理解的模块转换成浏览器能够识别的格式,通过插件进行各种任务的扩展,例如压缩代码、拷贝文件、生成 HTML 文件等等。 Webpack 已经成为当今前端项目构建领域中的主流工具,是现代前端项目必不可少的一环。 使用 Webpack 可以带来多方面的好处: 综上,使用 Webpack 可以帮助前端开发者以更加高效和灵活的方式构建现代化的前端应用。 Webpack 的基本概念包括: 总的来说,掌握这些基本概念可以有效地理解并使用 Webpack 进行前端项目构建。 Webpack 的核心概念包括模块、依赖图和 Chunk。 实现原理: Webpack 的打包过程分为以下几个步骤: 总的来说,Webpack 的实现原理是基于模块之间的依赖关系,通过解析模块的路径、加载模块的内容、转换模块的代码和打包模块成 Chunk 等一系列的步骤来实现前端项目的构建。 要安装 Webpack,首先你需要在你的系统上安装 Node.js 和 npm(Node Package Manager)。 Node.js 可以在官网 https://nodejs.org/en/ 上下载并安装。 安装完成后,可以在终端中使用以下命令来检查 Node.js 和 npm 的版本: 安装完成 Node.js 和 npm 之后,可以使用 npm 来安装 Webpack。在终端中进入你的项目目录下,执行以下命令来安装 Webpack: 其中, --save-dev 参数表示将 Webpack 安装为开发依赖。安装完成后,你可以在项目中使用 Webpack 进行打包。 Webpack 的配置文件通常命名为 webpack.config.js,这个文件位于项目的根目录下,用于配置 Webpack 的各种选项。 一个最基本的 Webpack 配置文件如下: 这个配置文件设置了入口文件为 ./src/index.js,输出文件的路径为 ./dist/main.js。 在这个配置文件中,我们使用了 Node.js 的模块系统,引入了 Node.js 中的 path 模块,并在 output 中使用了 path.resolve() 函数来设置输出文件路径。该函数根据传入的路径参数生成绝对路径,确保输出文件的路径始终是绝对路径。 你可以根据你的项目需要,添加各种配置选项,例如设置 Loader,启用插件等等。 以下是一个典型的 Webpack 配置文件示例: 在这个配置文件中,我们启用了 production 模式,并配置了三个 Loaders 和两个插件: 我们还使用了 HtmlWebpackPlugin 和 MiniCssExtractPlugin 插件,用于生成 HTML 文件和 CSS 文件。 以上示例中只是几个简单的配置示例,Webpack 功能非常强大,具体配置要根据项目需求来设置。 Webpack 的配置项非常多,以下是一些常用的配置项: 以上只是常见的一些选项,具体配置项还要根据项目需求进行设置。 总的来说,Webpack 提供了非常灵活和丰富的配置选项,可根据不同需求对打包过程进行微调。 Webpack 的插件可以用于完成更加灵活的操作,例如压缩代码、打包优化、生成 HTML 等。 Webpack 插件机制基于事件触发,当事件回调成功执行之后,插件会被调用执行对应任务。 以下是几个常用的插件及其作用: 使用插件的方法也很简单,在 webpack.config.js 中可以创建插件实例并在 plugins 中使用,示例如下: 在这个示例中,我们使用了 HtmlWebpackPlugin,并在 plugins 中创建了一个新的 Html-webpack-plugin 实例。它通过指定 title、filename 和 template 等选项,自动创建一个新的 HTML 文件,并自动引入打包输出的 JavaScript 文件。 同时,Webpack 也提供了许多其他的插件和 Loader,开发者可以按照自己的需要,引入和使用不同的插件。 Webpack 加载器用于处理在 Webpack 中加载和转换非 JavaScript 文件为 JavaScript,例如将 ES6/7 转换成 ES5、将 CSS 文件转换成 JavaScript 对象等。 Webpack 加载器允许你通过自定义转换器的方式方便地将非 JavaScript 文件转换为 Webpack 可以理解的模块。 以下是几个常用的 Webpack 加载器以及它们的作用: 使用加载器的方法也很简单,在 webpack.config.js 中可以添加 module.rules 打包规则,示例如下: 在这个示例中,我们创建了三个加载器: 在 module.rules 中,每个规则是一个包含 test、exclude、include 和 loader 等属性的对象,其中 test 用于匹配需要处理的文件类型,loader 用于指定要使用的加载器。 Webpack 提供了非常多的插件和加载器,以下简单介绍几个常见的插件和加载器并给出示例。 自动生成 HTML 文件,并将 JavaScript 文件自动插入其中。 安装: 示例: 将 CSS 文件提取为一个单独的文件,减小 JavaScript 文件的体积。 安装: 示例: 用于清空之前生成的打包文件夹。 安装: 示例: 用于将 ES6/7/8 转换为 ES5 语法。 安装: 示例: 用于处理 CSS 文件,将 CSS 转化为 JavaScript 对象,并注入到 HTML 中。 安装: 示例: 与 file-loader 类似,但是在文件大小(单位 byte)低于指定的限制时,可以返回源文件的 base64 URL。当文件大小超过限制时,使用 file-loader 将文件输出到指定的目录。 安装: 示例: 这个示例中,我们将图片文件转换为 base64 URL,但仅当文件大小不超过 10KB 时才会执行转换。当文件大小超过 10KB 时,使用 file-loader 将文件输出到指定的目录。通过设置传递给 type: 'asset'的选项,可以方便地控制如何转换文件。 Webpack 优化可以从以下几个方面入手: 以下是一些常见的Webpack 优化技巧: Tree-shaking 是指通过消除 JavaScript 中没有使用的代码,来优化打包体积。Tree-shaking 通常用于优化 ES6 模块引入,并依赖于 JavaScript 解析器的一些特性。 可以使用 Webpack 自带的 UglifyJsPlugin 或 TerserPlugin 来压缩和混淆代码。 Code splitting 是指将一个大文件分割成多个小文件以提高加载速度。Webpack 支持多种方式实现 Code splitting,包括使用 splitChunks、import() 或动态 import() 等方式。 按需加载(lazy loading)是指当页面需要使用某个模块时,再进行加载。可以通过使用 import() 或动态 import() 来实现按需加载。 懒加载是指在初始化时只加载必要的代码,而将其余代码推迟到稍后进行加载。这样可以大大减少初始的加载时间和资源消耗。预加载是指在该资源可能被需要前,提前加载该资源,以便下一步的使用。在 Webpack 中,可以使用 import() 或动态 import() 来实现懒加载和预加载。 压缩图片可以减小图片的大小,降低加载时间和流量消耗。可以使用 Webpack 的 image-webpack-loader、url-loader 或 file-loader 等加载器和插件来进行图片压缩。 为避免浏览器在每次请求时都重新加载资源,可以添加长缓存标识符来让浏览器缓存这些资源。可以使用 Webpack 的 output.filename 和 output.chunkFilename 来配置打包输出的文件名,并使用 hash、chunkhash、contenthash 等变量来区分不同版本的文件。 以上优化技巧可以结合实际需求进行采用。 Webpack 提供了很多优化工具和插件,可以针对具体项目进行配置。 对于开发过程中的 Webpack 应用程序调试,可以使用以下技巧: 在 Webpack 中,使用 devtool 配置选项可以生成 source-map 文件。这样可以使打包后的代码与原始代码之间建立关联,方便在浏览器开发者工具中进行调试。 示例: 使用 webpack-dev-server 可以提高开发效率,并方便进行调试。可以配置 devServer 来启用开发服务器,允许在本地测试应用程序并实现热更新。 示例: devServer 配置选项可以指定开发服务器的常用配置选项,例如指定服务器内容存放目录、热更新开关等。在这个例子中,我们使用了 webpack-dev-server、HtmlWebpackPlugin 和 HotModuleReplacementPlugin,其中 HotModuleReplacementPlugin 用于启用热更新。 webpack-bundle-analyzer 是一个 Webpack 插件,可以将打包生成的文件以可视化方式展示,查看应用程序中包含的哪些模块占用了大量空间,方便进行调试。 安装: 示例: 在 Webpack 配置中添加 BundleAnalyzerPlugin 插件,然后运行 Webpack,会在浏览器中打开一个页面来展示可视化结果。 除了上述技巧,还可以使用 Chrome 开发者工具的调试工具和插件来进行调试。例如,使用 SourceMap 插件将打包后的源代码映射到开发代码中,同时使用 React Developer Tools 查看 React 组件的工作原理等。 Webpack 和 Babel 可以结合使用来处理用 ES6 / ES2015+ 编写的 JavaScript 代码,使其可以在现代浏览器中运行。 Babel 是一个 JavaScript 编译器,它支持将 ES6 / ES2015+ 转换成 ES5 语法,用于在旧版浏览器中运行。 Webpack 可以使用 Babel 加载器(babel-loader)来解析和编译 JavaScript 代码。通过使用 Webpack 和 Babel,可以使用 ES6 / ES2015+ 特性来编写 JavaScript 代码,并将其转换为可以在所有浏览器中运行的代码。 以下是一个简单的使用 Webpack 和 Babel 的例子: 在这个例子中,webpack.config.js 中使用了 Babel 加载器来解析和编译 JavaScript 代码。具体来说,当 Webpack 遇到 .js 文件时,babel-loader 被应用于该文件,用于将 ES6 / ES2015+ 转换成 ES5 语法。在 options 中,我们配置了 Babel @babel/preset-env,并将目标浏览器定为“最近的两个版本和 IE11 及以上版本”。 需要注意的是,在使用 Babel 转换代码之前,需要先安装 babel-loader 和相关的 Babel 插件和预设。此外,为了使用 Webpack,还需要在 webpack.config.js 文件中进行相应的配置,例如设置入口和出口文件、指定打包模式等。 当然,如果您使用的是 Create React App 这类的脚手架工具,他们可能已经提供了集成好了 Webpack 和 Babel 的配置,您只需要简单地添加相关的代码即可进行使用。 Webpack 和 ESLint 可以结合使用来进行代码风格检查和语法检查,帮助开发者保证代码的质量和一致性。 以下是一个简单的使用 Webpack 和 ESLint 的例子: 在这个例子中,我们配置了 Webpack,在遇到 .js 文件时,首先使用 Babel 加载器来将 ES6/ES2015+ 转换成 ES5 语法,然后使用 ESLint 加载器来检查代码的语法和风格。可以通过简单的配置来自定义 ESLint 的规则、运行方式等。 需要注意的是,在使用 ESLint 进行代码检查之前,需要先安装 eslint 和相关的插件和配置文件。此外,在 webpack.config.js 文件中进行相应的配置,例如配置规则、忽略文件等。 当然,如果您使用的是 Create React App 这类的脚手架工具,他们可能已经提供了集成好了 ESLint 的配置,您只需要在 .eslintrc 文件中将检查规则配置为您需要的即可。 Webpack 和 React 可以结合使用来构建 React 应用程序。 以下是一个简单的使用 Webpack 和 React 的例子: 在这个例子中,我们使用了 Webpack 来打包一个 React 应用程序。在 entry 配置中,指定了应用程序的入口文件,即 src/index.jsx。在 output 配置中,指定了打包后的输出文件名和路径。在 resolve 配置中,指定了可以省略的文件扩展名,使得在引用模块时可以省略后缀。 在 module 配置中,我们使用了 Babel 加载器来解析和编译 JavaScript 代码。在 plugins 配置中,使用了 HtmlWebpackPlugin 来生成 index.html 文件,该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。需要注意的是,在使用 Babel 转换代码之前,需要先安装相关的插件和预设。 在 React 应用程序中,通常会使用组件来构建页面。下面是一个简单的 Hello World 组件的例子: 接下来,我们可以在一个入口文件中将该组件渲染到页面上: 在这个例子中,我们在入口文件中引入了 HelloWorld 组件,并使用 ReactDOM.render 方法将其渲染到页面上。 最后,使用 npm start 命令可以启动 Webpack,开发服务器会自动启动并监听文件变化,当对应的组件或者页面代码发生变化时,页面会实时更新。 Webpack 和 Vue.js 可以结合使用来构建 Vue.js 应用程序。 以下是一个简单的使用 Webpack 和 Vue.js 的例子: 在这个例子中,我们使用了 Webpack 来打包一个 Vue.js 应用程序。在 entry 配置中,指定了应用程序的入口文件,即 src/main.js。在 output 配置中,指定了打包后的输出文件名和路径。在 resolve 配置中,指定了可以省略的文件扩展名,使得在引用模块时可以省略后缀。 在 module 配置中,我们使用了 Vue.js 和 Babel 加载器来解析和编译 JavaScript 代码和 Vue 组件。在 plugins 配置中,使用了 HtmlWebpackPlugin 来生成 index.html 文件,并使用了 VueLoaderPlugin 来正确解析 Vue 组件。 在 Vue 应用程序中,我们通常会使用单文件组件来构建页面。下面是一个简单的 Hello World 组件的例子: 接下来,我们可以在一个入口文件中将该组件渲染到页面上: 在这个例子中,我们在入口文件中引入了 HelloWorld 组件,并使用 Vue 实例将其渲染到页面上。需要注意的是,在使用 Babel 转换代码之前,需要先安装相关的插件和预设。 最后,使用 npm start 命令可以启动 Webpack,开发服务器会自动启动并监听文件变化,当对应的组件或者页面代码发生变化时,页面会实时更新。 要将 React 应用程序打包成一个可部署的代码包,可以使用 Webpack。 以下是一个简单的使用 Webpack 打包 React 应用程序的例子: 首先需要安装相关的依赖项: 接着,创建一个配置文件 webpack.config.js,配置入口文件、输出文件、加载器等信息: 在这个例子中,我们指定了入口文件为 src/index.js,输出文件为 dist/bundle.js。在 module 配置中,我们使用了 Babel 加载器来解析和编译 React 组件及其依赖文件。同时,我们也使用了 CSS 加载器来加载 CSS 文件。在 plugins 配置中,使用了 HtmlWebpackPlugin 来生成 index.html 文件,该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。 接着,我们需要创建一个入口文件 src/index.js,并在其中引入 React 组件并将其渲染到页面上: 在这个例子中,我们引入了 App 组件并使用 ReactDOM.render() 方法将其渲染到页面上。需要注意的是,在运行应用程序之前,还需要在 HTML 文件中添加一个与 ReactDOM.render() 方法中指定的 id 相匹配的容器元素。 现在可以在终端运行 webpack 命令打包应用程序,打包后的文件将输出到 dist/bundle.js 文件中。可以通过简单的开发服务器进行测试: 现在可以使用 npm start 命令来启动开发服务器,自动打开浏览器并在其中运行应用程序。在修改代码后,可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。 要将 Vue.js 应用程序打包成一个可部署的代码包,也可以使用 Webpack。 以下是一个简单的使用 Webpack 打包 Vue.js 应用程序的例子: 首先需要安装相关的依赖项: 接着,创建一个配置文件 webpack.config.js,配置入口文件、输出文件、加载器等信息: 在这个例子中,我们指定了入口文件为 src/main.js,输出文件为 dist/bundle.js。同时,我们还使用了 Vue.js 相关的加载器,以及 Babel 加载器和 CSS 加载器进行编译。在 plugins 配置中,使用了 VueLoaderPlugin 来正确解析 Vue 组件,并使用了 HtmlWebpackPlugin 来生成 index.html 文件,该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。 接着,我们需要创建一个入口文件 src/main.js,并在其中创建一个 Vue 实例并挂载到页面上: 在这个例子中,我们引入了 App 组件并创建了一个 Vue 实例,并使用 render 方法将其挂载到页面上。 现在可以在终端运行 webpack 命令打包应用程序,打包后的文件将输出到 dist/bundle.js 文件中。可以通过简单的开发服务器进行测试: 现在可以使用 npm start 命令来启动开发服务器,自动打开浏览器并在其中运行应用程序。在修改代码后,可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。 Webpack 可以用来打包多页应用程序。多页应用程序与单页应用程序不同,其由多个 HTML 页面组成,每个页面都有着自己独立的 JavaScript 和 CSS 文件。 以下是一个简单的使用 Webpack 打包多页应用程序的例子: 首先需要创建多个 HTML 页面,并在其中引入对应的 JavaScript 和 CSS 文件。例如,我们创建两个页面 home.html 和 about.html: 在这个例子中,我们分别创建了 home.html 和 about.html 两个页面,而每个页面都包含一个对应的 JavaScript 文件。 接着,创建一个配置文件 webpack.config.js,配置入口文件、输出文件、加载器等信息: 在这个例子中,我们指定了入口文件为两个 JavaScript 文件 home.js 和 about.js,输出文件为 dist/home.js 和 dist/about.js。在 module 配置中,我们使用了 Babel 加载器来解析和编译 JavaScript 代码。在 plugins 配置中,使用了 HtmlWebpackPlugin 来生成对应的 HTML 文件,并且指定了对应的 JavaScript 文件。 接着,创建两个 JavaScript 文件 home.js 和 about.js,并在其中编写对应的脚本: 在这个例子中,我们分别在不同的 JavaScript 文件中编写对应的脚本。 现在可以在终端运行 webpack 命令打包应用程序,打包后的文件将输出到 dist 文件夹中。可以通过简单的开发服务器进行测试: 现在可以使用 npm start 命令来启动开发服务器,自动打开浏览器并在其中运行应用程序。在修改代码后,可以看到浏览器会自动实时更新。如果需要打包则运行 npm run build 命令。 要将单页应用程序打包成一个可部署的代码包,可以使用 Webpack。以下是一个简单的使用 Webpack 打包单页应用程序的例子: 首先需要安装相关的依赖项: 接着,创建一个配置文件 webpack.config.js,配置入口文件、输出文件、加载器等信息: 在这个例子中,我们指定了入口文件为 src/index.js,输出文件为 dist/bundle.js。在 module 配置中,我们使用了 Babel 加载器来解析和编译 React 组件及其依赖文件。同时,我们也使用了 CSS 加载器来加载 CSS 文件。在 plugins 配置中,使用了 HtmlWebpackPlugin 来生成 index.html 文件,该文件会自动将打包后的 JavaScript 文件插入到 HTML 中。 其中,devServer 增加了 historyApiFallback 为 true ,这是因为嵌入到HTML页面的SPA应用程序通常依赖于 HTML5 的 history 模式(如 React router),因此,需要将所有请求都指向 index.html,以防止路由错误。 接着,我们需要创建一个入口文件 src/index.js,并在其中创建一个根组件并挂载到页面上: 在这个例子中,我们引入了 Home、About 和 NotFound 三个组件,并使用 BrowserRouter 以及 Route、Switch 组件来实现页面路由。需要注意的是,在运行应用程序之前,还需要在 HTML 文件中添加一个与 ReactDOM.render() 方法中指定的 id 相匹配的容器元素。 现在可以在终端运行 webpack 命令打包应用程序,打包后的文件将输出到 dist/bundle.js 文件中。章节一:了解 Webpack
Webpack 是什么?
为什么使用 Webpack?
Webpack 的基本概念
Webpack 的核心概念和实现原理
章节二:安装和配置 Webpack
安装 Webpack
node -v
npm -v
npm install webpack webpack-cli --save-dev
配置 Webpack
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'production',
entry: '/src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
],
}
Webpack 的常用配置项
章节三:Webpack 的插件和加载器
Webpack 插件的作用和使用
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'index.html',
template: 'src/index.html',
}),
// ...
],
};
Webpack 加载器的作用和使用
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
};
Webpack 常用插件和加载器的介绍和示例
插件
HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: 'src/index.html'
})
]
};
MiniCssExtractPlugin
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
]
};
CleanWebpackPlugin
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// ...
plugins: [
new CleanWebpackPlugin()
]
};
加载器
babel-loader
npm install --save-dev babel-loader @babel/core @babel/preset-env
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
}
};
css-loader
npm install --save-dev css-loader style-loader
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
url-loader
npm install --save-dev url-loader
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|gif|jpg|jpeg)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 1024 * 10,
},
},
},
]
}
};
章节四:Webpack 的优化和调试
Webpack 的优化技巧
1. Tree-shaking
2. Code splitting
3. 按需加载
4. 懒加载和预加载
5. 压缩图片
6. 长缓存优化
7. 其他优化
Webpack 的调试技巧
1. 使用source-map
module.exports = {
// ...
devtool: 'source-map'
};
2. 配置devServer
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: 'src/index.html'
}),
new webpack.HotModuleReplacementPlugin()
]
};
3. 使用webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
// ...
plugins: [
new BundleAnalyzerPlugin()
]
}
章节五:Webpack 和其他工具的结合
Webpack 和 Babel 的结合
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: 'last 2 versions, ie >= 11'
}]
]
}
}
}
]
}
};
Webpack 和 ESLint 的结合
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader',
'eslint-loader'
]
}
]
},
// ...
};
Webpack 和 React 的结合
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.jsx',
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html'
})
]
};
// src/components/HelloWorld.jsx
import React from 'react';
const HelloWorld = ({ name }) => {
return (
<div>
<h1>Hello, {name}!</h1>
</div>
);
};
export default HelloWorld;
// src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
ReactDOM.render(
<HelloWorld name="Webpack" />,
document.getElementById('root')
);
Webpack 和 Vue.js 的结合
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.vue']
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html'
}),
new VueLoaderPlugin()
]
};
<!-- src/components/HelloWorld.vue -->
<template>
<div>
<h1>Hello, {{ name }}!</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
name: String
}
};
</script>
// src/main.js
import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';
new Vue({
el: '#app',
components: { HelloWorld },
data: {
name: 'Webpack'
},
template: '<HelloWorld :name="name" />'
});
章节六:Webpack 的实战案例
Webpack 打包 React 应用程序
npm install react react-dom
npm install babel-core babel-loader babel-preset-env babel-preset-react
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
// package.json
{
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
}
}
Webpack 打包 Vue.js 应用程序
npm install vue vue-template-compiler
npm install babel-core babel-loader babel-preset-env babel-plugin-transform-runtime
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader vue-style-loader css-loader less-loader less -D
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['transform-runtime']
}
}
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['vue-style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
// src/main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App),
}).$mount('#app');
// package.json
{
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
}
}
Webpack 打包多页应用程序
<!-- home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to the Home Page!</h1>
<script src="home.js"></script>
</body>
</html>
<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Page</title>
</head>
<body>
<h1>About Us</h1>
<script src="about.js"></script>
</body>
</html>
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
home: './src/home.js',
about: './src/about.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/home.html',
filename: 'home.html',
chunks: ['home']
}),
new HtmlWebpackPlugin({
template: 'src/about.html',
filename: 'about.html',
chunks: ['about']
})
]
};
// home.js
console.log('This is the home page.');
// about.js
console.log('This is the about page.');
// package.json
{
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
}
}
Webpack 打包单页应用程序
npm install react react-dom react-router-dom
npm install babel-core babel-loader babel-preset-env babel-preset-react
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devServer: {
historyApiFallback: true
}
};
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';
import './index.css';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</Router>
);
};
ReactDOM.render(<App />, document.getElementById('root'));