Webpack on Dapeng Zhang

解决webpack打包文件过大的问题

Mon, 21 Jul 2025 18:04:33 +0800

经过自己的多次波折，终于找到了一个可以解决的webpack打包过大的问题。

首先说明一下我的打包文件为什么会很大，主要原因是里面的第三方库用的多了，打包的时候就会把依赖的文件打包到一起，当然会很大了。

解决的办法是使用

webpack的externals，记录一个例子

externals: {
 'moment': true,
 'jquery':'jQuery',
 'bootstrap':true,
 'fancybox':true,
 'co':true,
 '_':'lodash',
 'async':true,
 'datetimepicker':true,
 'selectpicker':true,
 'sweetalert':true,
 'highcharts':'Highcharts',
 'director':'Router'
},

当然了这些库不用打包处理，但是在html文件中还是需要自己去引用的，不然我也不会知道你要运行的库文件在那里。

看我的

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="http://apps.bdimg.com/libs/moment/2.8.3/moment-with-locales.min.js"></script>
<script src="https://cdn.bootcss.com/co/4.1.0/index.min.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/async/1.4.2/async.min.js"></script>
<script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.3.4/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>
<script src="https://cdn.bootcss.com/sweetalert/1.1.0/sweetalert.min.js"></script>
<script src="https://cdn.bootcss.com/highcharts/4.1.9/highcharts.src.js"></script>
<script src="https://cdn.bootcss.com/Director/1.2.8/director.min.js"></script>
<script src="/js/out/common.js"></script>
<script src="/js/out/index.js"></script>

瞬间感觉好多的文件啊，当然了，这个是在一个页面要用react做很多事情的，你自己写的话就不需要这么多了，当然我技术低写不了哇。

此方法就是传说中webpack的CDN解决方案。

给大家一个参考，看不懂的可以到这几个地址去观摩一下：

http://www.zhihu.com/question/31352596

http://segmentfault.com/a/1190000002552008

http://www.cnblogs.com/vajoy/p/4650467.html

http://code.oneapm.com/javascript/2015/07/07/webpack_performance_1/

Webpack4 之编译Typescript

Mon, 07 Jul 2025 16:41:08 +0000

TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通的 JavaScript 代码。这篇文章里我们将时间 webpack 是如何跟 TypeScript 进行集成。

一如既往的创建项目的流程

mkdir webpack4-typescript-demo
cd webpack4-typescript-demo
npm init -y
npm install webpack webpack-cli --save-dev

构建项目，目录结构如下

├── package.json
├── src
│ └── index.tsx
└── webpack.config.js

基础安装

首先，执行以下命令，安装 TypeScript 编译器和需要的loader：

npm install --save-dev typescript ts-loader

现在，我们将修改目录结构和配置文件：

├── package.json
├── src
│ └── index.tsx
├── tsconfig.json
└── webpack.config.js

设置一个基本的配置，来支持 JSX，并将 TypeScript 编译到 ES5
tsconfig.json内容如下

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

在 webpack 配置中处理 TypeScript
webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.tsx',
 module: {
 rules: [
 {
 test: /\.tsx?$/,
 use: 'ts-loader',
 exclude: /node_modules/
 }
 ]
 },
 resolve: {
 extensions: [ '.tsx', '.ts', '.js' ]
 },
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 }
};

这会直接将 webpack 的入口起点指定为 ./index.tsx，然后通过 ts-loader _加载所有的 .ts 和 .tsx 文件，并且在当前目录输出_一个 bundle.js 文件。

ts-loader
为什么使用 ts-loader，因为它能够很方便地启用额外的 webpack 功能，例如将其他 web 资源导入到项目中。

source-map
要启用 source map，我们必须配置 TypeScript，以将内联的 source map 输出到编译过的 JavaScript 文件。必须在 TypeScript 配置中添加下面这行：
tsconfig.json

{
 "compilerOptions": {
 "outDir": "./dist/",
 "noImplicitAny": true,
 "module": "es6",
 "sourceMap": true, // 添加这行
 "target": "es5",
 "jsx": "react",
 "allowJs": true
 }
}

然后配置webpack，告诉 webpack 提取这些 source map，并内联到最终的 bundle 中。
添加如下

devtool: 'inline-source-map',

代码
webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.tsx',
 devtool: 'inline-source-map',
 module: {
 rules: [
 {
 test: /\.tsx?$/,
 use: 'ts-loader',
 exclude: /node_modules/
 }
 ]
 },
 resolve: {
 extensions: [ '.tsx', '.ts', '.js' ]
 },
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 }
};

如何使用第三方库

当从 npm 安装第三方库时，一定要牢记同时安装这个库的类型声明文件。你可以从 TypeSearch[http://microsoft.github.io/TypeSearch/] 中找到并安装这些第三方库的类型声明文件。
举个例子，如果想安装 lodash 这个库的类型声明文件，我们可以运行下面的命令：

npm install --save-dev @types/lodash

动手写实例

当前项目目录结构如下

├── dist
│ └── index.html
├── package.json
├── src
│ └── index.tsx
├── tsconfig.json
└── webpack.config.js

添加dist/index.html

<!doctype html>
<html>

<head>
 <title>Webpack - TypeScript</title>
</head>

<body>
 <script src="./bundle.js"></script>
</body>

</html>

src/index.tsx内容如下

import * as _ from "lodash";

function component() {
 var element = document.createElement('div');
 element.innerHTML = _.padStart("Hello TypeScript!", 20, "-");
 return element;
}

document.body.appendChild(component());

运行

npm run build

dist目录会多一个dist文件
使用浏览器打开dist/index.html
会看到输出如下内容

---Hello TypeScript!

项目地址

https://github.com/durban89/webpack4-typescript-demo.git

Webpack4渐进式网络应用程序

Mon, 07 Jul 2025 15:59:13 +0000

什么是渐进式网络应用程序

渐进式网络应用程序(Progressive Web Application - PWA)，是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers[https://developers.google.com/web/fundamentals/primers/service-workers/] 的网络技术来实现的。

到目前为止，我们一直是直接查看本地文件系统的输出结果。通常情况下，真正的用户是通过网络访问网络应用程序；用户的浏览器会与一个提供所需资源（例如，.html, .js 和 .css 文件）的服务器通讯。

那么让我们来使用一个简易服务器，搭建出我们所需的离线体验。我们将使用 http-server package 包：

npm install http-server --save-dev

还要修改 package.json 的 scripts 部分，来添加一个 server:run 脚本：

操作之前如果本地没有实践项目的话，可以使用之前分享的项目来实践，具体操作如下

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-webpack-demo && cd react-webpack-demo
npm install

操作完后继续如下操作
在package.json中添加如下

"server:run": "npx http-server dist"

添加完后类似如下

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "build": "npx webpack --config webpack.prod.js",
 "build:package": "NODE_ENV=production npx webpack --config webpack.prod.js",
 "start": "npx webpack-dev-server --open --hot --config webpack.dev.js",
 "server:run": "npx http-server dist"
},

我们先打包并运行下，操作如下

npm run build // 为了顺畅，可以先将webpack-bundle-analyzer关掉
npm run server:run

会有类似如下输出

> xx@xx server:run /Users/durban/nodejs/webpack-react-demo
> npx http-server dist

Starting up http-server, serving dist
Available on:
 http://127.0.0.1:8081
 http://172.18.0.70:8081
Hit CTRL-C to stop the server

如果你打开浏览器访问 http://127.0.0.1:8081，应该会看到在 dist 目录创建出服务，并可以访问 webpack 应用程序。如果停止服务器然后刷新，则 webpack 应用程序不再可访问。

这就是我们最终要改变的现状。“停止服务器然后刷新，仍然可以查看应用程序正常运行”

添加 Workbox
添加 workbox-webpack-plugin 插件，并调整 webpack.prod.js 文件

npm install workbox-webpack-plugin --save-dev

webpack.prod.js修改的地方如下
引入

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

plugins中添加

new WorkboxWebpackPlugin.GenerateSW({
 clientsClaim: true,
 skipWaiting: true,
 exclude: [/\.map$/],
}),

有了 Workbox，再执行 npm run build 时会发生什么，如下图

可以看到，生成了 2 个额外的文件

service-worker.js
precache-manifest.2f20a332d5e297960a8442509af3aa18.js

注册 Service Worker
修改src/index.jsx，修改添加如下代码

if ('serviceWorker' in navigator) {
 window.addEventListener('load', () => {
 navigator.serviceWorker.register('/service-worker.js').then((registration) => {
 console.log('SW registered: ', registration);
 }).catch((registrationError) => {
 console.log('SW registration failed: ', registrationError);
 });
 });
}

再次运行 npm build build 来构建包含注册代码版本的应用程序。然后用

npm run server:run

启动服务。访问 http://127.0.0.1:8081 并查看 console 控制台。在那里你应该看到，如下图

现在来进行测试。停止服务器并刷新页面。如果浏览器能够支持 Service Worker，你应该可以看到你的应用程序还在正常运行。然而，服务器已经停止了服务，此刻是 Service Worker 在提供服务。

激动的不要不要的，此等功力果然深厚

注意：
在实践过程中，遇到几个问题
1、如何清空precache
2、如何更新precache

比如我忘记加了某个文件我要做清空怎么办？
比如我加错了某个文件想要更新怎么办？

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.13

Webpack4构建代码分析webpack-bundle-analyzer

Mon, 07 Jul 2025 15:59:08 +0000

用交互式可缩放树形图显示webpack输出文件的大小。感觉用了之后又高大上了。

实践的上面我还是使用前面文章的项目，没有的可以按照如下的部署进行安装

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-webpack-demo && cd react-webpack-demo
npm install

下面开始配置并使用webpack-bundle-analyzer

安装

npm install --save-dev webpack-bundle-analyzer

配置[这里只配置webpack.prod.js]
分别添加如下代码到文件中

const WebpackBundleAnalyzer = require('webpack-bundle-analyzer');

const {
 BundleAnalyzerPlugin,
} = WebpackBundleAnalyzer;

new BundleAnalyzerPlugin()

添加后结果如下

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const WebpackBundleAnalyzer = require('webpack-bundle-analyzer');
const common = require('./webpack.common');

const {
 BundleAnalyzerPlugin,
} = WebpackBundleAnalyzer;

module.exports = merge(common, {
 mode: 'production',
 devtool: 'source-map',
 entry: {
 app: [
 './src/index.jsx',
 ],
 vendor: [
 'react',
 'react-dom',
 'redux',
 ],
 },
 output: {
 filename: '[name].[chunkhash].bundle.js',
 chunkFilename: '[name].[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 new InlineManifestWebpackPlugin(),
 new UglifyJsPlugin({
 sourceMap: true,
 }),
 new webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('production'),
 }),
 new ExtractTextPlugin({
 filename: 'main.[chunkhash].css',
 }),
 new ManifestPlugin(),
 new webpack.NamedModulesPlugin(),
 new BundleAnalyzerPlugin(),
 ],
 optimization: {
 splitChunks: {
 chunks: 'initial', // 必须三选一： "initial" | "all"(默认就是all) | "async"
 minSize: 0, // 最小尺寸，默认0
 minChunks: 1, // 最小 chunk ，默认1
 maxAsyncRequests: 1, // 最大异步请求数， 默认1
 maxInitialRequests: 1, // 最大初始化请求书，默认1
 name: () => {}, // 名称，此选项可接收 function
 cacheGroups: { // 这里开始设置缓存的 chunks
 priority: '0', // 缓存组优先级 false | object |
 vendor: { // key 为entry中定义的 入口名称
 chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
 test: /react|lodash|react-dom|redux/, // 正则规则验证，如果符合就提取 chunk
 name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
 minSize: 0,
 minChunks: 1,
 enforce: true,
 maxAsyncRequests: 1, // 最大异步请求数， 默认1
 maxInitialRequests: 1, // 最大初始化请求书，默认1
 reuseExistingChunk: true, // 可设置是否重用该chunk（查看源码没有发现默认值）
 },
 },
 },
 runtimeChunk: {
 name: 'manifest',
 },
 },
});

运行

npm run build

结果类似如下图

会自动打开一个浏览器，如下图

是不是很赞，以后我们就可以根据这个来分析打包的情况

我们也可以命令行的方式，操作如下[注意，需要将配置中的new BundleAnalyzerPlugin()注释掉，不然会在下面的操作执行产生冲突而卡住]

npx webpack --config=webpack.prod.js --profile --json > stats.json

然后执行

npx webpack-bundle-analyzer ./stats.json

输出如下

Error parsing bundle asset "/Users/durban/nodejs/webpack-react-demo/0.d12185fd8e6117c063c6.bundle.js": no such file
Error parsing bundle asset "/Users/durban/nodejs/webpack-react-demo/2.682c3024cf3095674f24.bundle.js": no such file
Error parsing bundle asset "/Users/durban/nodejs/webpack-react-demo/manifest.e6adb1315c7823bc535e.bundle.js": no such file
Error parsing bundle asset "/Users/durban/nodejs/webpack-react-demo/vendor.7aaf509786ae83a5de3c.bundle.js": no such file
Error parsing bundle asset "/Users/durban/nodejs/webpack-react-demo/app.bb3713d2c6aeb09ceeb9.bundle.js": no such file
Error parsing bundle asset "/Users/durban/nodejs/webpack-react-demo/1.8539b93fe0620243ce58.bundle.js": no such file

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

发现有错误，找不到要分析的文件，更换下执行命令

npx webpack-bundle-analyzer ./stats.json dist

类似如下输出

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

跟上面的类似

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.12

Webpack4缓存相关配置 - Manifest

Mon, 07 Jul 2025 15:54:15 +0000

Manifest干嘛用，我摘抄了下官网的一些内容如下，先来了解下

一旦你的应用程序中，如 index.html 文件、一些 bundle 和各种资源加载到浏览器中，会发生什么？你精心安排的 /src 目录的文件结构现在已经不存在，所以 webpack 如何管理所有模块之间的交互呢？这就是 manifest 数据用途的由来……

当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为 “Manifest”，当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法，那些 import 或 require 语句现在都已经转换为 webpack_require 方法，此方法指向模块标识符(module identifier)。通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块。

所以，现在你应该对 webpack 在幕后工作有一点了解。“但是，这对我有什么影响呢？”，你可能会问。答案是大多数情况下没有。runtime 做自己该做的，使用 manifest 来执行其操作，然后，一旦你的应用程序加载到浏览器中，所有内容将展现出魔幻般运行。然而，如果你决定通过使用浏览器缓存来改善项目的性能，理解这一过程将突然变得尤为重要。

通过使用 bundle 计算出内容散列(content hash)作为文件名称，这样在内容或文件修改时，浏览器中将通过新的内容散列指向新的文件，从而使缓存无效。一旦你开始这样做，你会立即注意到一些有趣的行为。即使表面上某些内容没有修改，计算出的哈希还是会改变。这是因为，runtime 和 manifest 的注入在每次构建都会发生变化。

什么是Runtime

runtime，以及伴随的 manifest 数据，主要是指：在浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

具体如何提取manifest前面的文章【Webpack4缓存相关配置】已经说过了。

下面我们来配置下
修改webpack.prod.js，另外如果需要webpack.dev.js的话可以另外在处理
安装

npm i inline-manifest-webpack-plugin -D

分别添加如下

const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');

new InlineManifestWebpackPlugin(),

runtimeChunk: {
 name: 'manifest',
},

到配置文件中
最终结果如下

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const common = require('./webpack.common');

module.exports = merge(common, {
 mode: 'production',
 devtool: 'source-map',
 entry: {
 app: [
 './src/index.jsx',
 ],
 vendor: [
 'react',
 'react-dom',
 'redux',
 ],
 },
 output: {
 filename: '[name].[chunkhash].bundle.js',
 chunkFilename: '[name].[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 new InlineManifestWebpackPlugin(),
 new UglifyJsPlugin({
 sourceMap: true,
 }),
 new webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('production'),
 }),
 new ExtractTextPlugin({
 filename: 'main.[chunkhash].css',
 }),
 new ManifestPlugin(),
 new webpack.NamedModulesPlugin(),
 ],
 optimization: {
 splitChunks: {
 chunks: 'initial', // 必须三选一： "initial" | "all"(默认就是all) | "async"
 minSize: 0, // 最小尺寸，默认0
 minChunks: 1, // 最小 chunk ，默认1
 maxAsyncRequests: 1, // 最大异步请求数， 默认1
 maxInitialRequests: 1, // 最大初始化请求书，默认1
 name: () => {}, // 名称，此选项可接收 function
 cacheGroups: { // 这里开始设置缓存的 chunks
 priority: '0', // 缓存组优先级 false | object |
 vendor: { // key 为entry中定义的 入口名称
 chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
 test: /react|lodash|react-dom|redux/, // 正则规则验证，如果符合就提取 chunk
 name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
 minSize: 0,
 minChunks: 1,
 enforce: true,
 maxAsyncRequests: 1, // 最大异步请求数， 默认1
 maxInitialRequests: 1, // 最大初始化请求书，默认1
 reuseExistingChunk: true, // 可设置是否重用该chunk（查看源码没有发现默认值）
 },
 },
 },
 runtimeChunk: {
 name: 'manifest',
 },
 },
});

运行

npm run build

执行后输出大概如下

Hash: b26027576f67c9b4a2ed
Version: webpack 4.12.0
Time: 11329ms
Built at: 2018-06-21 15:44:30
 Asset Size Chunks Chunk Names
 1.8539b93fe0620243ce58.bundle.js.map 5.01 KiB 1 [emitted]
 0.d12185fd8e6117c063c6.bundle.js 5.93 KiB 0 [emitted]
 2.682c3024cf3095674f24.bundle.js 6.75 KiB 2 [emitted]
 manifest.e6adb1315c7823bc535e.bundle.js 2.3 KiB 3 [emitted] manifest
 vendor.7aaf509786ae83a5de3c.bundle.js 107 KiB 4 [emitted] vendor
 app.bb3713d2c6aeb09ceeb9.bundle.js 224 KiB 5 [emitted] app
 main.bb3713d2c6aeb09ceeb9.css 290 bytes 5 [emitted] app
 main.e6adb1315c7823bc535e.css 57 bytes 3 [emitted] manifest
 0.d12185fd8e6117c063c6.bundle.js.map 4.13 KiB 0 [emitted]
 1.8539b93fe0620243ce58.bundle.js 6.86 KiB 1 [emitted]
 2.682c3024cf3095674f24.bundle.js.map 5.09 KiB 2 [emitted]
manifest.e6adb1315c7823bc535e.bundle.js.map 11.8 KiB 3 [emitted] manifest
 main.e6adb1315c7823bc535e.css.map 106 bytes 3 [emitted] manifest
 vendor.7aaf509786ae83a5de3c.bundle.js.map 266 KiB 4 [emitted] vendor
 app.bb3713d2c6aeb09ceeb9.bundle.js.map 633 KiB 5 [emitted] app
 main.bb3713d2c6aeb09ceeb9.css.map 106 bytes 5 [emitted] app
 ./index.html 666 bytes [emitted]
 manifest.json 1.06 KiB [emitted]

我们看下dist/index.html这个文件

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>React + ReactRouter Demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/main.e6adb1315c7823bc535e.css" rel="stylesheet"><link href="/main.bb3713d2c6aeb09ceeb9.css" rel="stylesheet"></head>
<body>
 <div id="root"></div>
<script type="text/javascript" src="/manifest.e6adb1315c7823bc535e.bundle.js"></script><script type="text/javascript" src="/app.bb3713d2c6aeb09ceeb9.bundle.js"></script><script type="text/javascript" src="/vendor.7aaf509786ae83a5de3c.bundle.js"></script></body>
</html>

可以看到

/manifest.e6adb1315c7823bc535e.bundle.js

已经被加入了

这样当模块被打包并运输到浏览器上时，runtime就会根据manifest文件来处理和加载模块。利用manifest就知道从哪里去获取模块代码。

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.11

Webpack4缓存相关配置

Mon, 07 Jul 2025 15:54:12 +0000

关于webpack的缓存相关配置，我用我之前文章的项目来做下实践

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-webpack-demo && cd react-webpack-demo
npm install

提取模板(Extracting Boilerplate)

npm install --save-dev webpack-manifest-plugin

添加如下代码
引入

const ManifestPlugin = require('webpack-manifest-plugin');

在plugins中加入

new ManifestPlugin(),

plugins中结果如下

plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 new webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('development'),
 }),
 new ExtractTextPlugin({
 filename: '[name].[hash].bundle.css',
 }),
 new ManifestPlugin(),
],

将

new ExtractTextPlugin({
 filename: '[name].bundle.css',
}),

改为

new ExtractTextPlugin({
 filename: '[name].[hash].bundle.css',
}),

再将

output: {
 filename: '[name].bundle.js',
 chunkFilename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
},

改为

output: {
 filename: '[name].[hash].bundle.js',
 chunkFilename: '[name].[hash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
},

这次我们执行

npx webpack --config webpack.dev.js

然后看下打包效果

Hash: 88fb183afd5b8cdbb10b
Version: webpack 4.12.0
Time: 2748ms
Built at: 2018-06-14 17:43:46
 Asset Size Chunks Chunk Names
 app.88fb183afd5b8cdbb10b.bundle.js 1.17 MiB app [emitted] app
 0.88fb183afd5b8cdbb10b.bundle.js 10.9 KiB 0 [emitted]
 1.88fb183afd5b8cdbb10b.bundle.js 11 KiB 1 [emitted]
 2.88fb183afd5b8cdbb10b.bundle.js 10.1 KiB 2 [emitted]
app.88fb183afd5b8cdbb10b.bundle.css 233 bytes app [emitted] app
 ./index.html 439 bytes [emitted]
 manifest.json 366 bytes [emitted]

多了一个manifest.json
在项目目录下面查看下这个文件

cat ./dist/manifest.json

{
 "app.js": "/app.88fb183afd5b8cdbb10b.bundle.js",
 "app.css": "/app.88fb183afd5b8cdbb10b.bundle.css",
 "0.88fb183afd5b8cdbb10b.bundle.js": "/0.88fb183afd5b8cdbb10b.bundle.js",
 "1.88fb183afd5b8cdbb10b.bundle.js": "/1.88fb183afd5b8cdbb10b.bundle.js",
 "2.88fb183afd5b8cdbb10b.bundle.js": "/2.88fb183afd5b8cdbb10b.bundle.js",
 "./index.html": "/./index.html"
}

这个文件干嘛用，后面说

根据官方的说法

将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中，是比较推荐的做法，这是因为，它们很少像本地的源代码那样频繁修改。因此通过实现以上步骤，利用客户端的长效缓存机制，可以通过命中缓存来消除请求，并减少向服务器获取资源，同时还能保证客户端代码和服务器端代码版本一致。

但是目前官网的实例不起作用了，经过我的实践当前webpack的版本已经使用了新的逻辑，具体操作如下
我们先配置webpack.dev.js
添加如下配置

optimization: {
 splitChunks: {
 chunks: 'initial', // 必须三选一： "initial" | "all"(默认就是all) | "async"
 minSize: 0, // 最小尺寸，默认0
 minChunks: 1, // 最小 chunk ，默认1
 maxAsyncRequests: 1, // 最大异步请求数， 默认1
 maxInitialRequests: 1, // 最大初始化请求书，默认1
 name: () => {}, // 名称，此选项可接收 function
 cacheGroups: { // 这里开始设置缓存的 chunks
 priority: '0', // 缓存组优先级 false | object |
 vendor: { // key 为entry中定义的 入口名称
 chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
 test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
 name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
 minSize: 0,
 minChunks: 1,
 enforce: true,
 maxAsyncRequests: 1, // 最大异步请求数， 默认1
 maxInitialRequests: 1, // 最大初始化请求书，默认1
 reuseExistingChunk: true, // 可设置是否重用该chunk（查看源码没有发现默认值）
 },
 },
 },
},

entry中加入

vendor: [
 'react',
 'react-dom',
 'redux',
],

然后执行

npx webpack --config webpack.dev.js

得到类似如下输出

Hash: 29ff4803e0ac98b32c1c
Version: webpack 4.12.0
Time: 2641ms
Built at: 2018-06-14 17:51:36
 Asset Size Chunks Chunk Names
 app.29ff4803e0ac98b32c1c.bundle.js 1.17 MiB app [emitted] app
vendor.29ff4803e0ac98b32c1c.bundle.js 735 KiB vendor [emitted] vendor
 0.29ff4803e0ac98b32c1c.bundle.js 10.9 KiB 0 [emitted]
 1.29ff4803e0ac98b32c1c.bundle.js 11 KiB 1 [emitted]
 2.29ff4803e0ac98b32c1c.bundle.js 10.1 KiB 2 [emitted]
 app.29ff4803e0ac98b32c1c.bundle.css 233 bytes app [emitted] app
 ./index.html 524 bytes [emitted]
 manifest.json 423 bytes [emitted]

多了一个vendor.29ff4803e0ac98b32c1c.bundle.js这个文件同时app.29ff4803e0ac98b32c1c.bundle.js的大小也减小了

模块标识符(Module Identifiers)

从上面的实践中我们发现我们其实是没有更改代码的但是文件中hash的值却变化了
根据官网的描述

这是因为每个 module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说，当解析顺序发生变化，ID 也会随之改变。因此，简要概括：

main bundle 会随着自身的新增内容的修改，而发生变化。
vendor bundle 会随着自身的 module.id 的修改，而发生变化。
manifest bundle 会因为当前包含一个新模块的引用，而发生变化。
第一个和最后一个都是符合预期的行为 – 而 vendor 的 hash 发生变化是我们要修复的。幸运的是，可以使用两个插件来解决这个问题。第一个插件是 NamedModulesPlugin，将使用模块的路径，而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性，然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin，推荐用于生产环境构建：

由于我们现在改的是webpack.dev.js，我们用来实践下
在plugins中添加如下代码

new webpack.NamedModulesPlugin(),

然后

npx webpack --config webpack.dev.js

看下打包效果

Hash: 29ff4803e0ac98b32c1c
Version: webpack 4.12.0
Time: 2813ms
Built at: 2018-06-14 17:57:59
 Asset Size Chunks Chunk Names
 app.29ff4803e0ac98b32c1c.bundle.js 1.17 MiB app [emitted] app
vendor.29ff4803e0ac98b32c1c.bundle.js 735 KiB vendor [emitted] vendor
 0.29ff4803e0ac98b32c1c.bundle.js 10.9 KiB 0 [emitted]
 1.29ff4803e0ac98b32c1c.bundle.js 11 KiB 1 [emitted]
 2.29ff4803e0ac98b32c1c.bundle.js 10.1 KiB 2 [emitted]
 app.29ff4803e0ac98b32c1c.bundle.css 233 bytes app [emitted] app
 ./index.html 524 bytes [emitted]
 manifest.json 423 bytes [emitted]

可以修改下CounterComponet.jsx后在执行

npx webpack --config webpack.dev.js

再看下打包效果

Hash: 3cf568e90b38c1c3c339
Version: webpack 4.12.0
Time: 2709ms
Built at: 2018-06-14 17:59:00
 Asset Size Chunks Chunk Names
 app.3cf568e90b38c1c3c339.bundle.js 1.17 MiB app [emitted] app
vendor.3cf568e90b38c1c3c339.bundle.js 735 KiB vendor [emitted] vendor
 0.3cf568e90b38c1c3c339.bundle.js 10.9 KiB 0 [emitted]
 1.3cf568e90b38c1c3c339.bundle.js 11 KiB 1 [emitted]
 2.3cf568e90b38c1c3c339.bundle.js 10.1 KiB 2 [emitted]
 app.3cf568e90b38c1c3c339.bundle.css 233 bytes app [emitted] app
 ./index.html 524 bytes [emitted]
 manifest.json 423 bytes [emitted]

结果还是都变化了，奇怪，我们试下生产环境的方式
将webpack.dev.js的相关的改动我们在webpack.prod.js中也做下修改，然后再试下【注意生产环境我们用new webpack.HashedModuleIdsPlugin()】
分别执行

npm run build

第一次输出类似如下

Hash: e0b25a1605f0da8569c1
Version: webpack 4.12.0
Time: 9622ms
Built at: 2018-06-14 18:14:57
 Asset Size Chunks Chunk Names
 1.62c80f16d58866af39d9.bundle.js.map 5 KiB 1 [emitted]
 0.a81f2d5fe8a554f19db1.bundle.js 5.32 KiB 0 [emitted]
 2.4bb6ea90727a9917c466.bundle.js 6.23 KiB 2 [emitted]
 vendor.153d0cc454d09104782f.bundle.js 106 KiB 3 [emitted] vendor
 app.e7d2f7719c957e5c378e.bundle.js 217 KiB 4 [emitted] app
 main.e7d2f7719c957e5c378e.css 290 bytes 4 [emitted] app
 0.a81f2d5fe8a554f19db1.bundle.js.map 4.13 KiB 0 [emitted]
 1.62c80f16d58866af39d9.bundle.js 6.34 KiB 1 [emitted]
 2.4bb6ea90727a9917c466.bundle.js.map 5.08 KiB 2 [emitted]
vendor.153d0cc454d09104782f.bundle.js.map 271 KiB 3 [emitted] vendor
 app.e7d2f7719c957e5c378e.bundle.js.map 644 KiB 4 [emitted] app
 main.e7d2f7719c957e5c378e.css.map 106 bytes 4 [emitted] app
 ./index.html 518 bytes [emitted]
 manifest.json 845 bytes [emitted]

第二次我们修改CounterComponent.jsx,然后再试下结果输出类似如下

Hash: 3102790f92604ffd6406
Version: webpack 4.12.0
Time: 13758ms
Built at: 2018-06-14 18:17:58
 Asset Size Chunks Chunk Names
 1.62c80f16d58866af39d9.bundle.js.map 5 KiB 1 [emitted]
 0.44264f48cf81d76c34f3.bundle.js 5.32 KiB 0 [emitted]
 2.4bb6ea90727a9917c466.bundle.js 6.23 KiB 2 [emitted]
 vendor.153d0cc454d09104782f.bundle.js 106 KiB 3 [emitted] vendor
 app.2d7ccb1930e41d2c5c9b.bundle.js 217 KiB 4 [emitted] app
 main.2d7ccb1930e41d2c5c9b.css 290 bytes 4 [emitted] app
 0.44264f48cf81d76c34f3.bundle.js.map 4.13 KiB 0 [emitted]
 1.62c80f16d58866af39d9.bundle.js 6.34 KiB 1 [emitted]
 2.4bb6ea90727a9917c466.bundle.js.map 5.08 KiB 2 [emitted]
vendor.153d0cc454d09104782f.bundle.js.map 271 KiB 3 [emitted] vendor
 app.2d7ccb1930e41d2c5c9b.bundle.js.map 644 KiB 4 [emitted] app
 main.2d7ccb1930e41d2c5c9b.css.map 106 bytes 4 [emitted] app
 ./index.html 518 bytes [emitted]
 manifest.json 845 bytes [emitted]

可以看出来变动的之后
0.xxxx.bundle.js这个文件
看来这个hash的变化针对的只是生产环境，不过这个也可以了，频繁改动只对生产环境的影响比较大

我们将生产环境的构建配置中的

new webpack.HashedModuleIdsPlugin()

替换为

new webpack.NamedModulesPlugin()

可以再试下，效果跟HashedModuleIdsPlugin是一样的只不过文件大小会有些差别

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.10

Webpack4生产环境构建相关配置 - Split CSS即分离样式

Mon, 07 Jul 2025 15:54:08 +0000

继续之前的分享【Webpack4生产环境构建相关配置 - 指定环境】

下面让我们用我们之前文章的项目来做下实践

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-webpack-demo && cd react-webpack-demo
npm install

通常最好的做法是使用 ExtractTextPlugin 将 CSS 分离成单独的文件。

disable 选项可以和 –env 标记结合使用，以允许在开发中进行内联加载，推荐用于热模块替换和构建速度。

通过上面官网的描述我们知道，在生产中将样式文件单独出来是比较好的做法，下面实践下如何配置实现

npm install --save-dev extract-text-webpack-plugin@next

当前时间点如果执行

npm install --save-dev extract-text-webpack-plugin

会不符合当前webpack4这个版本，所以我们安装的时候使用上一个命令来安装，如果你在安装的时候版本已经释放的话，可以安装现在这个命令来进行安装

先来修改webpack.dev.js
plugins中追加

new ExtractTextPlugin({
 filename: '[name].bundle.css',
}),

结果如下

plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 new webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('development'),
 }),
 new ExtractTextPlugin({
 filename: '[name].bundle.css',
 }),
],

还需要修改webpack.common.js

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
},

改为如下

{
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
 fallback: 'style-loader',
 use: 'css-loader',
 }),
},

执行

npm run start

我们会看到有如下输出

Version: webpack 4.12.0
Time: 4398ms
Built at: 2018-06-13 17:55:05
 Asset Size Chunks Chunk Names
 app.bundle.js 1.52 MiB app [emitted] app
 0.bundle.js 10.9 KiB 0 [emitted]
 1.bundle.js 11 KiB 1 [emitted]
 2.bundle.js 10.1 KiB 2 [emitted]
app.bundle.css 0 bytes app [emitted] app
 ./index.html 397 bytes [emitted]
Entrypoint app = app.bundle.js app.bundle.css

现在app.bundle.css还没有内容，我们来加下样式
创建css/CounterComponnet.css，内容如下

.btn {
 width: 60px;
 height: 30px;
 background: #673ab7;
 font-size: 16px;
 border: none;
 border-radius: 2px;
 outline: none;
 color: #fff;
}

.btn:focus {
 background: #3d51b5;
}

.btn.first-child {
 margin-right: 5px;
}

修改src/components/CounterComponnet.jsx中的

<button onClick={this.props.doIncrement}>+</button>
<button onClick={this.props.doDecrement}>-</button>

改为

<button className="btn first-child" onClick={this.props.doIncrement}>+</button>
<button className="btn" onClick={this.props.doDecrement}>-</button>

创建css/main.css，加入如下代码

@import './CounterComponent.css';

src/index.jsx添加如下引入代码

import './css/main.css';

最后目录结构如下

├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── App.jsx
│ ├── actions
│ │ ├── counter.js
│ │ └── index.js
│ ├── components
│ │ ├── AboutComponent.jsx
│ │ ├── AppComponent.jsx
│ │ ├── CounterComponent.jsx
│ │ ├── HomeComponent.jsx
│ │ ├── LoadingComponent.jsx
│ │ ├── RoleComponent.jsx
│ │ ├── TopicComponent.jsx
│ │ └── TopicsComponent.jsx
│ ├── css
│ │ ├── CounterComponent.css
│ │ └── main.css
│ ├── index.jsx
│ ├── reducers
│ │ ├── counter.js
│ │ └── index.js
│ └── routes.jsx
├── webpack.common.js
├── webpack.config.js
├── webpack.dev.js
└── webpack.prod.js

为了看出打包效果明显一点，重新启动打包程序

npm run start

看出打包的输出日志如下

Version: webpack 4.12.0
Time: 4721ms
Built at: 2018-06-13 17:53:01
 Asset Size Chunks Chunk Names
 app.bundle.js 1.52 MiB app [emitted] app
 0.bundle.js 10.9 KiB 0 [emitted]
 1.bundle.js 11 KiB 1 [emitted]
 2.bundle.js 10.1 KiB 2 [emitted]
app.bundle.css 233 bytes app [emitted] app
 ./index.html 397 bytes [emitted]
Entrypoint app = app.bundle.js app.bundle.css

然后点击进入计数器页面

样式如下图

这里我为什么会把css单独放一个目录而且命名的方式跟组件的命名方式一样，原因是css在一个目录下比较好整合到一个css文件然后放在主入口，命名方式一样这样方便我们管理组件，这种结构化的方式会很好的提高我们的工作效率

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.9

Webpack4生产环境构建相关配置 - 指定环境

Mon, 07 Jul 2025 15:54:04 +0000

继续之前的分享【Webpack4生产环境构建相关配置 - 代码压缩】

下面让我们用我们之前文章的项目来做下实践

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-webpack-demo && cd react-webpack-demo
npm install

许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE_ENV === ‘production’ 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。我们可以使用 webpack 内置的 DefinePlugin 为所有的依赖定义这个变量：

大概设置配置如下
修改webpack.prod.js,在plugins里面加入如下

new webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('production'),
}),

最终plugins如下

plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 new UglifyJsPlugin({
 sourceMap: true,
 }),
 new webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('production'),
 }),
],

官方还有一个说明

技术上讲，NODE_ENV 是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于决定在开发环境与生产环境(dev-vs-prod)下，服务器工具、构建脚本和客户端 library 的行为。然而，与预期不同的是，无法在构建脚本 webpack.config.js 中，将 process.env.NODE_ENV 设置为 “production”，请查看 #2537[https://github.com/webpack/webpack/issues/2537]。因此，例如 process.env.NODE_ENV === ‘production’ ? ‘[name].[hash].bundle.js’ : ‘[name].bundle.js’ 这样的条件语句，在 webpack 配置文件中，无法按照预期运行。

我记得以前是可以按照预期执行的，但是现在说不行，我们就认为不行吧，以防做了其他的改动，也为了跟官方一致，我们按照官方的说明来配置

如果有印象的话，之前文章有一个环节是配置redux-logger的，在src/index.jsx里面有个

if (typeof __DEV__ !== 'undefined') {
 middleware.push(createLogger());
}

虽然这种方式也能实现，但是感觉不专业，毕竟像react库自己或者其他大型的库都是通过使用process.env.NODE_ENV这样的方式来判断的，为了保持自己库也能跟国际挂钩，咱也按照标准来，修改如下

if (process.env.NODE_ENV !== 'production') {
 middleware.push(createLogger());
}

npm run build

打包完之后我们打开index.html，这里会个问题，就是需要一个真实的server去运行咱们的项目根目录就设置在dist下面，
推荐一个http-server
如果没有的话按照我的步骤安装下，安装如下

npm install http-server -g

安装为之后通过终端进入到本项目的dist目录下，然后执行

http-server ./ -p 8084

如果有如下输出表示已经启动成功

Starting up http-server, serving ./
Available on:
 http://127.0.0.1:8084
 http://172.18.0.70:8084
Hit CTRL-C to stop the server

用Chrome浏览器打开http://127.0.0.1:8084，然后调出DevTools，然后进入到计数器，点击加减号，右侧的console中是没有任何输出，如下图，表示我们的webpack.pord.js的配置是起作用的。

我们运行下

npm run start

效果如下图

console中会有对应的输出，这是因为我们没有在webpack.dev.js做任何配置

以后在生产环境和开发环境有任何的需要根据环境变量来做判断处理，这个就是一个很好的例子

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.8

Webpack4生产环境构建相关配置 - 代码压缩

Mon, 07 Jul 2025 15:52:12 +0000

继续之前的分享【Webpack4生产环境构建相关配置 - 基础配置】

下面让我们用我们之前文章的项目来做下实践

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-webpack-demo && cd react-webpack-demo
npm install

1、安装代码压缩需要的插件uglifyjs-webpack-plugin

npm i -D uglifyjs-webpack-plugin

2、修改webpack配置
修改webpack.prod.js

为什么改webpack.prod.js而不是webpack.dev.js，因为在生产环境为了减少文件的大小以加快文件的加载速度，以此来提高用户的体验度

在plugins加入如下代码

new UglifyJsPlugin()

结果如下

plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 new UglifyJsPlugin(),
],

我们做下对比，使用压缩工具，跟不使用压缩工具的区别

上图是使用压缩扩展的

上图是未使用压缩扩展的
奇怪好像没有什么区别，也许webpack在生产环境下应该默认调用了压缩扩展

source map
这里引用下官方的话

“
我们鼓励你在生产环境中启用 source map，因为它们对调试源码(debug)和运行基准测试(benchmark tests)很有帮助。虽然有如此强大的功能，然而还是应该针对生成环境用途，选择一个构建快速的推荐配置（具体细节请查看 devtool）。对于本指南，我们将在生产环境中使用 source-map 选项，而不是我们在开发环境中用到的 inline-source-map
”
因人而异吧，我们来看下这个如果我们加了会有什么变化

修改配置webpack.prod.js
添加

devtool: 'source-map',

并修改

new UglifyJSPlugin()

为下面的代码

new UglifyJSPlugin({
 sourceMap: true
})

webpack.prod.js结果如下

module.exports = merge(common, {
 mode: 'production',
 devtool: 'source-map',
 entry: {
 app: [
 './src/index.jsx',
 ],
 },
 output: {
 filename: '[name].[chunkhash].bundle.js',
 chunkFilename: '[name].[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 new UglifyJsPlugin({
 sourceMap: true,
 }),
 ],
});

运行下

npm run build

如下图

可以看出文件稍微变大了。

开发环境不建议使用代码压缩，这样不方便调试，生产环境可加可不加，因人而异，因需求而异。

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.7

Webpack4生产环境构建相关配置 - 基础配置

Mon, 07 Jul 2025 15:52:04 +0000

这里为什么要实践下这个，引用下官方的原文

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

虽然，以上我们将生产环境和开发环境做了略微区分，但是，请注意，我们还是会遵循不重复原则(Don’t repeat yourself - DRY)，保留一个“通用”配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码。

下面让我们用我们之前文章的项目来做下实践

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-webpack-demo && cd react-webpack-demo
npm install
npm install --save-dev webpack-merge

创建文件webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 chunkFilename: '[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy', 'react-hot-loader/babel'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
 },
};

创建文件webpack.dev.js

const merge = require('webpack-merge');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const common = require('./webpack.common');

module.exports = merge(common, {
 mode: 'development',
 devtool: 'eval',
 entry: {
 app: [
 'webpack/hot/only-dev-server',
 'react-hot-loader/patch',
 './src/index.jsx',
 ],
 },
 devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 }],
 },
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
 }),
 ],
});

创建文件webpack.prod.js

const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common');

module.exports = merge(common, {
 mode: 'production',
 entry: {
 app: [
 './src/index.jsx',
 ],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
});

然后修改package.json

"build": "npx webpack --config webpack.prod.js",
"start": "npx webpack-dev-server --open --hot --config webpack.dev.js"

指定具体的配置文件

接下来分别执行

npm run start // 开发环境执行
npm run build // 生产环境执行

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.6

Webpack4代码分割实现按需加载/懒加载

Mon, 07 Jul 2025 15:48:49 +0000

为什么要实现按需加载或懒加载，引用下官网的话

懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

1、现在clone原始项目如下

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git webpack-react-demo
cd webpack-react-demo
npm install
npm start

2、安装代码分割懒加载需要的库

npm install babel-plugin-syntax-dynamic-import --save-dev
npm install react-loadable

3、代码配置
webpack.config.js

output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
},

添加如下代码

chunkFilename: '[name].bundle.js',

结果如下

output: {
 filename: '[name].bundle.js',
 chunkFilename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
},

.babelrc

"plugins": [
 "transform-async-to-generator",
 "transform-strict-mode",
 "transform-object-assign",
 "transform-decorators-legacy",
 "react-hot-loader/babel"
],

plugins中添加如下代码

"syntax-dynamic-import"

结果如下

"plugins": [
 "transform-async-to-generator",
 "transform-strict-mode",
 "transform-object-assign",
 "transform-decorators-legacy",
 "react-hot-loader/babel",
 "syntax-dynamic-import"
],

4、修改代码调用
修改src/routes.jsx
添加

import Loadable from 'react-loadable';

将路由配置中的

<Route path="/about" component={AboutComponent} />

改为

<Route
 path="/about"
 component={Loadable({
 loader: () => import('./components/AboutComponent'),
 loading: LoadingComponent,
 })}
/>

从webpack-dev-server控制台可以看出原来的如下图

更新代码后通过webpack-dev-server控制台可以看出多了一个类似0.bundle.js的文件，如下图

同样的逻辑我们更改 /topics对应的组件和/counter对应的组件
从webpack-dev-server控制台可以看出,多了几个类似的文件

如果我重新启动webpack-dev-server的话可以从webpack-dev-server控制台日志看出类似下图的输出

小知识点
将

chunkFilename: '[name].bundle.js',

改为

chunkFilename: '[chunkhash].bundle.js',

重新

npm start

看看日志输出，会看到类似如下的输出

这个特点有助于项目的版本发布需求

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.4

Webpack4+React16+ReactRouter4 - historyApiFallback 多级路由

Mon, 07 Jul 2025 15:48:44 +0000

之前的几篇文章写的很多，里面在开发环境下都用到了

historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
},

但是在我们开发也许会遇到一个很奇怪的问题就是，当我们访问到二级以上的路由的情况下，在刷新页面会发现页面加载不出需要的js,此时会显示一个404，说文件不存在，但是仔细看的话发现加载的js路径不对呀，正常来说js的加载是在/下面的,如、xxx.js，但是当我们访问到比如/topics/1的时候，js请求的路径就变成了/topics/xxx.js，这个问题根据经验来说应该是html-webpack-plugin的原因，因为它在帮我们加入js文件的时候应该给我们一个base的参数，但是我也没有找到类似这样的参数，或者其他配置可以解决这个问题，最终让我追溯到了webpack的配置中output的选项中，其中有个publicPath这个选项

文档中的意思是

该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此，在多数情况下，此选项的值都会以/结束。

那么我们就来设置下

output: {
 filename: '[name].bundle.js',
 chunkFilename: '[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
},

中加入

publicPath: '/',

结果如下

output: {
 filename: '[name].bundle.js',
 chunkFilename: '[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
},

保存后重启webpack-dev-server

npm start

然后再去刷新，发现问题得到了解决。在任何页面进行刷新就能保证正常的加载到js文件。

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.5

Webpack4+React16+ReactRouter4+Redux整合开发 - Redux Logger日志相关配置

Fri, 04 Jul 2025 14:27:37 +0000

之前的几篇文章继承了redux，这里不得不说下与redux开发相关的一些配置redux-logger，其实有很多，也有另外一种方式，这里我觉得这个是比较好的，这里做下记录，跟大家分享下。

首先clone代码

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git redux-devtools
cd redux-devtools
npm install 

npm start

然后安装redux-logger

npm install redux-logger

打开src/index.jsx
引入redux-logger

import { createLogger } from 'redux-logger';

更新修改代码结果如下

const middleware = [];
if (typeof __DEV__ !== 'undefined') {
 middleware.push(createLogger()); // 创建日志
}
// 为了添加多个中间件 我们重新改造middleware
middleware.push(routerMiddleware(history));

// 这行是DevTools的配置 后面做详细说明
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(...middleware)), // 中间件引入
);

日志一般是在开发环境中使用，我们需要加个变量来做下控制，这里通过修改webpack.config.js中的plugins加入

new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
})

配置完结果如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: [
 'webpack/hot/only-dev-server',
 'react-hot-loader/patch',
 './src/index.jsx',
 ],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy', 'react-hot-loader/babel'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 const {
 plugins,
 } = config;
 plugins.push(new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
 }));
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
 },
 plugins,
 });
}

module.exports = config;

重新执行

npm start

打开计数器，通过chrome的devtools可以看到类似如下图的日志，这样我们在做数据交互的时候就能清晰的了解到具体的数据调用情况

这里前提说下，Chrome浏览器最好是安装下redux的Chrome扩展，不知道的可自行百度或google下，后面的文章有需要的话，在详细说下。

实践项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git

tag:v_1.0.3

Webpack4+React16+ReactRouter4+Redux整合开发 - react-hot-loader

Fri, 04 Jul 2025 14:27:34 +0000

继续上篇文章【Webpack4+React16+ReactRouter4+Redux整合开发】继续分享，这里我们针对细节的部分做下优化，主要是能更加高效的提升我们的开发效率

1、clone 实例代码并将代码运行起来

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-hot-loader-demo && cd react-hot-loader-demo

npm install

2、运行项目

npm start

3、修改webpack.config.js

修改webpack-dev-server的配置，添加

hot: true

结果如下

devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
},

修改entry

entry: {
 app: [
 'webpack/hot/only-dev-server', // 这里新加
 'react-hot-loader/patch', // 这里新加
 './src/index.jsx',
 ],
},

修改module中rule部分

{
 test: /\.(js|jsx)$/,
 loader: [
 'babel-loader',
 'react-hot-loader/webpack',
 ],
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
}

修改src/index.jsx
将原来的

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

替换为

const render = () => {
 ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <App history={history} />
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
 );
};

render();

if (module.hot) {
 module.hot.addStatusHandler((status) => {
 console.log('status = ', status);
 });

 module.hot.accept('./App', () => {
 // 这里是当前版本很重要的环节，不然的话react-hot-reload不起作用
 require('./App').default;
 render();
 });

 module.hot.accept('./reducers', () => {
 store.replaceReducer(connectRouter(history)(rootReducer));
 render();
 });
}

添加src/App.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { ConnectedRouter } from 'connected-react-router';
import routes from './routes';

const App = ({ history }) => (
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
);

App.propTypes = {
 history: PropTypes.objectOf(PropTypes.any).isRequired,
};

export default App;

最后一个package.json中start命令修改

"start": "npx webpack-dev-server --open --hot"

最后重启项目

npm start

试着改改UI，会有神奇的效果

实践环境具体版本以项目的package.json为准

os: mac
node: v8.9.4

项目地址
https://github.com/durban89/webpack4-react16-reactrouter-demo.git
TAG: v_1.0.2

Webpack4+React16+ReactRouter4+Redux整合开发

Fri, 04 Jul 2025 14:27:31 +0000

续接上文【Webpack4+React16+ReactRouter4整合开发】

拉取github代码
https://github.com/durban89/webpack4-react16-reactrouter-demo.git

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git webpack4-react16-reactrouter-redux
cd webpack4-react16-reactrouter-redux
npm install 
npm start

如果没有异常就可以正常写代码了

首先看下react-router-redux，从react-router官网的redux介绍部分可以看出写的是React Router Redux，但是点击后会告诉你Deprecated。我的天！废弃了，好吧，然后下面告诉你connected-react-router
我的天，又造了一个轮子，看来要重头学起了，没关系，咱们就是不怕折腾，人活着就是折腾嘛。
我们链接到connected-react-router，各种的炫耀夸，太多了，各种优点，我们还是来点实际的，操作开始

npm install redux react-redux history react-hot-loader connected-react-router --save

如何使用
修改src/index.jsx

1、第一步
添加第一部分 - 导入使用的库函数

import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import { connectRouter, ConnectedRouter, routerMiddleware } from 'connected-react-router';

添加第二部分 - 需要自己去定义

import rootReducer from './reducers'; // 这里的文件是新加的 - 具体是如何创建的可以看下项目代码
import routes from './routes'; // 这里的文件是新加的 - 具体是如何创建的可以看下项目代码

添加第三部分 - 配置redux相关的逻辑

const history = createBrowserHistory();
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(routerMiddleware(history))),
);

添加第四部分 - 整合react-router

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

最终src/index.jsx内容如下

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import { connectRouter, ConnectedRouter, routerMiddleware } from 'connected-react-router';
import ReactDOM from 'react-dom';
import rootReducer from './reducers';
import routes from './routes';

const history = createBrowserHistory();
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(routerMiddleware(history))),
);

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

src/routes.jsx 主要配置路由跟组件的关系 -> 上面这行import routes from ‘./routes’;代码

import React from 'react';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';

const routes = (
 <div>
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 </AppComponent>
 </Router>
 </div>
);

export default routes;

2、第二步
配置好了，就要开始使用了
1】、创建reducers
src/reducers/counter.js

const counterReducer = (state = 0, action) => {
 switch (action.type) {
 case 'INCREMENT':
 return state + 1;
 case 'DECREMENT':
 return state - 1;
 default:
 return state;
 }
};

export default counterReducer;

2】、将counter.js加入到主reducers里面

src/reducers/index.js // 这里的文件就是对应这段代码 import rootReducer from './reducers';
import { combineReducers } from 'redux';
import counterReducer from './counter';

export default combineReducers({
 count: counterReducer,
});

3】、创建actions


export const increment = () => ({
 type: 'INCREMENT',
});

export const decrement = () => ({
 type: 'DECREMENT',
});

4】、添加一个组件src/components/CounterComponent.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { counter } from 'Actions';

const {
 increment, decrement,
} = counter;

class CounterComponent extends Component {
 constructor(props, context) {
 super(props, context);

 this.state = {};
 }

 render() {
 const {
 count,
 } = this.props;

 return (
 <div>
 <p>数值: {count}</p>
 <button onClick={this.props.doIncrement}>+</button>
 <button onClick={this.props.doDecrement}>-</button>
 </div>
 );
 }
}

CounterComponent.propTypes = {
 count: PropTypes.number,
 doIncrement: PropTypes.func.isRequired,
 doDecrement: PropTypes.func.isRequired,
};

CounterComponent.defaultProps = {
 count: 0,
};

const mapStateToProps = state => ({
 count: state.count,
});

const mapDispatchToProps = dispatch => ({
 doIncrement: () => dispatch(increment()),
 doDecrement: () => dispatch(decrement()),
});

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

5】、将组件加到路由里面

src/routes.js

import React from 'react';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';
import CounterComponent from './components/CounterComponent';

const routes = (
 <div>
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 <li><ALink to="/counter">计数器</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 <Route path="/counter" component={CounterComponent} />
 </AppComponent>
 </Router>
 </div>
);

export default routes;

6】、为了引入方便再加一个src/actions/index.js

import counter from './counter';

const actions = {
 counter,
};

export default actions;
export { counter };

到这里基本上就完工了，应该可以在页面看到计数器，并进行操作了

import { counter } from 'Actions';

这里是比较特殊的
这个要归功于webpack

resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
},

这里我们加了这个配置，于是在引入的时候就会正常引入需要的代码了。

好了，整个配置就完成了，项目我已经上传到github了，需要的同学可以自行去下载查看

实例项目地址:

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.1

Webpack4+React16+ReactRouter4整合开发

Fri, 04 Jul 2025 14:27:27 +0000

这次分享的内容有部分是跟之前的文章【webpack4手动配置安装react开发】大概类似，不同的是这次我们要结合reactr-router进行开发

1、创建项目并安装

mkdir webpack4_react16_reactrouter && cd webpack4_react16_reactrouter

npm init -y

npm install react react-dom prop-types react-router-dom

npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server eslint eslint-plugin-html eslint-plugin-react babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import babel-core babel-loader babel-plugin-transform-strict-mode babel-plugin-transform-object-assign babel-plugin-transform-decorators-legacy babel-preset-es2015 babel-preset-react babel-preset-stage-0 style-loader css-loader url-loader --save-dev

react开发需要用到的
babel相关的是用来做es5/es6语法解析的
eslint相关的是用来做语言检查的

2、eslint和webpack相关配置
.eslintrc

{
 "env": {
 "browser": true,
 "node": true,
 "es6": true,
 "jquery": true
 },
 "parser": "babel-eslint",
 "plugins": [
 "react",
 "html"
 ],
 "extends": [
 "airbnb"
 ],
 "rules": {
 "no-underscore-dangle": 0
 }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: ['./src/index.jsx'],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 },
 });
}

module.exports = config;

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>React + ReactRouter Demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div id="root"></div>
</body>
</html>

基本上整个目录结构就搭建完了。还是蛮繁琐的，但是自己了解了其中整个逻辑及流程，对自己是有意的，不过说不好未来就成体系了，直接调用就好了，比如现在的create-react-app，可以直接帮你创建一个项目，很不错的一个选择。
但是搭建一个符合自己需求的更有价值。
基本的都弄完了，接下来如何使用ReactRouter呢，先从入口文件开始
src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';

ReactDOM.render(
 (
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 </AppComponent>
 </Router>
 ),
 document.getElementById('root'),
);

基本上整个实例是参考了官网的实例，只是针对自己的需求做局部的调整，对于需要使用React开发的同学完全可以入手了，关于数据相关的后面再继续讨论。

这里有个很重要的点，就是在使用webpack-dev-server的使用，当你跳转到某个路由的时候，再刷新会发现页面提示找不到，这个问题这里介绍一个解决方案
historyApiFallback
只需要在webpack.config.js中配置下

historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
},

最终的文件结构如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: ['./src/index.jsx'],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
 },
 });
}

module.exports = config;

在运行npm start，修改代码试试，这里强调下版本，如果你的版本比我的新的话，要自己去看下官网的api是否有调整

实例环境，拉取github代码，看package.json，一切尽在你掌握之中
实例项目地址:

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.0

webpack4手动配置安装react开发

Fri, 04 Jul 2025 14:27:21 +0000

截止目前，以前都是在使用webpack打包react来进行开发，为了跟随技术的步伐，今天来折腾下新版本的新用法

实践环境

webpack: 4.9.1
react: 16.4.0

1、创建项目并安装

mkdir webpack4_react16_reactrouter && cd webpack4_react16_reactrouter

npm init -y

npm install react react-dom prop-types

npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server eslint eslint-plugin-html eslint-plugin-react babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import babel-core babel-loader babel-plugin-transform-strict-mode babel-plugin-transform-object-assign babel-plugin-transform-decorators-legacy babel-preset-es2015 babel-preset-react babel-preset-stage-0 style-loader css-loader url-loader --save-dev

react开发需要用到的
babel相关的是用来做es5/es6语法解析的
eslint相关的是用来做语言检查的

2、eslint、babel和webpack相关配置

.eslintrc

{
 "env": {
 "browser": true,
 "node": true,
 "es6": true,
 "jquery": true
 },
 "parser": "babel-eslint",
 "plugins": [
 "react",
 "html"
 ],
 "extends": [
 "airbnb"
 ],
 "rules": {
 "no-underscore-dangle": 0
 }
}

.babelrc // 这个文件可以不用加暂时不起作用

{
 "plugins": [
 "transform-es2015-modules-commonjs"
 ]
}

修改webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 mode: 'production',
 entry: {
 app: ['./src/index.jsx'],
 },
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [
 {
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 });
}

module.exports = config;

下面来修改index.js，修改index.js为index.jsx
src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import AppComponent from './components/AppComponent';

ReactDOM.render(
 (<AppComponent>React Demo</AppComponent>),
 document.getElementById('root'),
);

添加src/components/AppComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';

class AppComponent extends React.Component {
 constructor(props, context) {
 super(props, context);

 this.state = {};
 }

 render() {
 return (
 <div>{this.props.children}</div>
 );
 }
}

AppComponent.propTypes = {
 children: PropTypes.node.isRequired,
};

export default AppComponent;

修改index.html，这个只是作为一个模板来使用，具体的后期复杂逻辑，以后的文章分享

<!doctype html>
<html>
 <head>
 <title></title>
 </head>
 <body>
 <div id="root"></div>
 </body>
</html>

项目目录最终的结构

├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── components
│ │ └── AppComponent.jsx
│ ├── data.xml
│ ├── demo-image.png
│ ├── font.woff2
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ ├── glyphicons-halflings-regular.woff2
│ ├── index.css
│ ├── index.jsx
│ └── print.js
└── webpack.config.js

运行开发环境的命令

npm run start

执行后，会看到页面展示React Demo，代表我们的程序加好了，之后可以直接进行相关的开发

npm run build // 打包

npm run build:package // 压缩打包

上面两个都会直接生成dist文件夹，然后里面会生成需要部署的所有文件

项目地址

https://github.com/durban89/webpack4-react16-demo.git

里面有很多细节是在本博客没有的，可以自己看下，不懂的可以加群交流。

webpack4打包library库

Fri, 04 Jul 2025 14:27:13 +0000

使用React做开发，经常会写一些符合自己项目需求的lib库，但是通常用的都是ES6的语法，没办法，谁叫我喜欢这中写代码的方式呢，但是其他同事不会写怎么办，但是又急于要一个跟我写的一模一样的UI，怎么办。我也没办法呀，于是网站找了一圈也只是具体的如何打包，但是具体到如何使用还是有很大的区别的，虽然我也找到了具体的解决办法，但是还是有区别于正常的调用方式
希望懂的认识可以共同探讨

1、创建并初始化项目

mkdir webpack4-library && cd webpack4-library
npm init -y
npm install webpack webpack-cli eslint eslint-plugin-html eslint-plugin-react babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import babel-loader babel-plugin-transform-object-assign babel-plugin-transform-decorators-legacy babel-preset-react babel-preset-stage-0 style-loader css-loader url-loader -D

创建webpack配置文件webpack.config.jswebpack.config.js

/**
 * @author durban.zhang
 * @date 2018-05-31
 */

const path = require('path');
const webpack = require('webpack');
module.exports = {
 mode: 'production',
 devtool: 'source-map',
 entry: path.join(__dirname, 'src/index.js'),
 output: {
 filename: 'Popbox.min.js',
 library: 'Popbox',
 libraryTarget: 'umd',
 umdNamedDefine: true,
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules')
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 exclude: [
 path.resolve(__dirname, 'node_modules')
 ],
 }]
 },
 plugins: [
 new webpack.ProvidePlugin({
 Promise: 'es6-promise',
 }),
 new webpack.DefinePlugin({
 'global.GENTLY': false,
 'process.env': {
 NODE_ENV: JSON.stringify('production'),
 },
 }),
 new webpack.optimize.OccurrenceOrderPlugin(),
 ],
};

src/index.js 这里js文件就是React项目里面的自己写的lib库，直接拿过来就好了。

/**
 * @author durba.zhang xxx@xxx
 */
import './styles/index.css';

import tanchuangPng from './images/tanchuang.png';

class Box {
 constructor(options) {
 this.containerObj = $('.pop-container');
 this.options = Object.assign({}, {
 title: '提示',
 text: '',
 }, options);

 this.parent = $('<div class="pop-container"></div>');

 if (this.containerObj.length) {
 this.containerObj.remove();
 }
 }

 init() {
 const {
 middleBtnText,
 } = this.options;

 let {
 confirmBtnText,
 cancelBtnText,
 } = this.options;

 if (!confirmBtnText) {
 confirmBtnText = '确定';
 }

 if (!confirmBtnText) {
 cancelBtnText = '取消';
 }

 let conText = '';
 if (Object.prototype.hasOwnProperty.call(this.options, 'text') &&
 this.options.text) {
 conText = this.options.text;
 }

 const $overlayContainer = $('<div class="pop-overlay"></div>');
 const $divContainer = $('<div class="pop-alert"></div>');
 const $imgContainer = $(`<div class="pop-logo"><img src=${tanchuangPng} width=100 height=100 /></div>`);
 const $messageContainer = $('<div class="pop-info"></div>');

 const $conContainer = $('<p class="pop-text"></p>');
 $conContainer.append(conText);

 let $confirmbtnContainer;
 if (Object.prototype.hasOwnProperty.call(this.options, 'confirmBtnLink') &&
 this.options.confirmBtnLink) {
 $confirmbtnContainer = $(`<div class="pop-horizal-box pop-top-border" style="line-height:28px"><a href="${this.options.confirmBtnLinkUrl}" class="btn btn-default confirm-btn">${confirmBtnText}</button></div>`);
 } else {
 $confirmbtnContainer = $(`<div class="pop-horizal-box pop-top-border"><button class="btn btn-default confirm-btn">${confirmBtnText}</button></div>`);
 $confirmbtnContainer.on('click', this.confirmHandle.bind(this));
 }

 let $middlebtnContainer;
 if (Object.prototype.hasOwnProperty.call(this.options, 'middleBtnLink') &&
 this.options.middleBtnLink) {
 $middlebtnContainer = $(`<div class="pop-horizal-box pop-top-border" style="border-top:none"><a style="padding-top:10px" href="${this.options.middleBtnLinkUrl}" class="btn btn-default confirm-btn">${middleBtnText}</button></div>`);
 } else {
 $middlebtnContainer = $(`<div class="pop-horizal-box pop-top-border" style="border-top:none"><button class="btn btn-default confirm-btn">${middleBtnText}</button></div>`);
 $middlebtnContainer.on('click', this.middleHandle.bind(this));
 }

 const $cancelbtnContainer = $(`<div class="pop-horizal-box no-bottom-border"><button class="btn btn-default cancel-btn">${cancelBtnText}</button></div>`);
 $cancelbtnContainer.on('click', this.cancelHandle.bind(this));

 $messageContainer.append($conContainer);
 if (!this.options.hideConfirmBtn) {
 $messageContainer.append($confirmbtnContainer);
 }

 if (this.options.middleBtnShow) {
 $messageContainer.append($middlebtnContainer);
 }

 if (!this.options.hideCancelBtn) {
 if (this.options.hideConfirmBtn) {
 $cancelbtnContainer.css({
 'border-top': '1px solid #f1f1f1',
 });
 }

 $messageContainer.append($cancelbtnContainer);
 }

 $divContainer.append($messageContainer);
 this.parent.append($overlayContainer);
 this.parent.append($divContainer);
 this.parent.append($imgContainer);

 $('body').append(this.parent);
 this.containerObj = $('.pop-container');
 }

 confirmHandle() {
 this.closeBoxHandle();
 if (Object.prototype.hasOwnProperty.call(this.options, 'confirmFunc') &&
 this.options.confirmFunc) {
 this.options.confirmFunc();
 }
 }

 cancelHandle() {
 this.closeBoxHandle();
 if (Object.prototype.hasOwnProperty.call(this.options, 'cancelFunc') &&
 this.options.cancelFunc) {
 this.options.cancelFunc();
 }
 }

 middleHandle() {
 this.closeBoxHandle();
 if (Object.prototype.hasOwnProperty.call(this.options, 'middleFunc') &&
 this.options.middleFunc) {
 this.options.middleFunc();
 }
 }

 closeBoxHandle() {
 console.log(this.containerObj);
 this.containerObj.remove();
 }
}

class Popbox {
 static pop(options, func) {
 const box = new Box(options, func);
 box.init();
 }

 static closePop() {
 $('.pop-container').remove();
 }
}

export default Popbox;

src/index.css

/*覆层*/

.overlay-component-bg {
 position: fixed;
 width: 100%;
 height: 100%;
 bottom: 0;
 left: 0;
 visibility: hidden;
 z-index: 10;
 background: rgba(0, 0, 0, 0);
 -webkit-transition: all .2s;
 -moz-transition: all .2s;
 -ms-transition: all .2s;
 -o-transition: all .2s;
 transition: all .2s;
}

.overlay-bg-show {
 background: rgba(0, 0, 0, 0.3);
 visibility: visible;
}

/* request loading */

.request-loading {
 position: fixed;
 height: 60px;
 top: 50%;
 left: 50%;
 text-align: center;
 width: 60px;
 background: rgba(0, 0, 0, 0.3);
 visibility: visible;
 border-radius: 5px;
 z-index: 5000;
 margin-left: -30px;
}

.pop-container .pop-overlay {
 background-color: rgba(0, 0, 0, .4);
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 z-index: 1000;
 position: fixed;
}

.pop-container .pop-alert {
 display: block;
 width: 280px;
 min-height: 100px;
 z-index: 2000;
 background: 0 0;
 top: 50%;
 left: 50%;
 position: fixed;
 border-radius: 5px;
 margin-left: -140px;
 margin-top: -100px;
}

.pop-container .pop-logo {
 position: fixed;
 top: 50%;
 z-index: 30001;
 left: 50%;
 margin-left: -50px;
 margin-top: -150px;
}

.pop-container .pop-info {
 display: block;
 width: 100%;
 min-height: 100px;
 background: #fff;
 border-radius: 5px;
 padding-top: 55px;
}

.pop-container .pop-info .pop-text {
 text-align: center;
 padding-left: 15px;
 padding-right: 15px;
 padding-bottom: 10px;
 margin-bottom: 10px;
 font-size: 16px;
}

.pop-container .pop-info .pop-top-border {
 border-top: 1px solid #f1f1f1;
}

.pop-container .pop-info .pop-horizal-box {
 height: 40px;
 border-bottom: 1px solid #f1f1f1;
 text-align: center;
}

.pop-container .pop-info .no-bottom-border {
 border-bottom: none
}

.pop-info .pop-horizal-box .confirm-btn {
 height: 100%;
 border: none;
 width: 100%;
 box-shadow: none;
 background: #fff;
 color: #43bae9;
 font-size: 15px;
 outline: none;
}

.pop-info .pop-horizal-box .cancel-btn {
 height: 100%;
 border: none;
 width: 100%;
 box-shadow: none;
 background: #fff;
 color: #43bae9;
 font-size: 15px;
 outline: none;
}

index.html

<html>
 <head>
 <meta charset=UTF-8>
 <meta http-equiv=X-UA-Compatible>
 <meta name=format-detection content="telephone=no">
 <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
 <title>Popbox Test</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script src="./dist/Popbox.min.js"></script>
 </head>
 <body>
 <div>Popbox</div>
 <script>
 $(() => {
 window.Popbox.default.pop({
 text: '这个是一个提示',
 confirmBtnText: '联系客服',
 cancelBtnText: '好的，我知道了',
 confirmFunc: () => {
 console.log('asda');
 },
 });
 });
 </script>
 </body>
</html>

项目目录结构

├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── images
│ │ └── tanchuang.png
│ ├── index.js
│ ├── lib
│ │ └── Util.js
│ └── styles
│ └── index.css
└── webpack.config.js

打开index.html是不是运行后没有./dist/Popbox.min.js这个文件，没关系，执行下面的命令

npx webpack

npx - 是node本身提供的一个功能，需要的具体了解的可以百度或者Google

再打开看看

目前仅适用于app web端，你可以不用使用我写的lib，但是方法是一样的。
提示
注意看package.json，里面的版本号很重要，不同的版本可能会导致不同的异常，可能你就要重新埰坑了。

Demo环境
mac os
npm - 6.0.1
node - v8.9.4

项目地址：https://github.com/durban89/webpack4-library

webpack4 初体验 - 开发 - webpack-dev-server

Fri, 04 Jul 2025 14:27:09 +0000

webpack-dev-server 为开发人员提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：

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

修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
 mode: 'development',
 entry: {
 app: ['./src/index.js'],
 print: ['./src/print.js'],
 },
 devtool: 'eval',
 devServer: {
 contentBase: path.join(__dirname, "dist"),
 compress: true,
 port: 8083,
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'Webpack-输出管理'
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ]
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ]
 }
 ],
 }
};

让我们添加一个 script 脚本，可以直接运行开发服务器(dev server)：
package.json

{
 "name": "webpack4-demo",
 "version": "1.0.0",
 "private": true,
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "build": "webpack",
 "start": "webpack-dev-server --open"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "description": "",
 "devDependencies": {
 "clean-webpack-plugin": "^0.1.19",
 "css-loader": "^0.28.11",
 "csv-loader": "^2.1.1",
 "file-loader": "^1.1.11",
 "html-webpack-plugin": "^3.2.0",
 "style-loader": "^0.21.0",
 "webpack": "^4.9.1",
 "webpack-cli": "^2.1.4",
 "webpack-dev-server": "^3.1.4",
 "xml-loader": "^1.2.1"
 },
 "dependencies": {
 "lodash": "^4.17.10"
 }
}

现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。试一下！

webpack-dev-server 带有许多可配置的选项。转到[相关文档(https://webpack.docschina.org/configuration/dev-server)]以了解更多。

以上配置告知 webpack-dev-server，在 localhost:8083 下建立服务，将 dist 目录下的文件，作为可访问文件。

这里的配置只是一个非常简答的，如果遇到复杂点的项目可能要做些更多的配置，比如在使用react-router的情况下，这种情况下可能会由于路由的问题导致g更复杂的情况，针对此类的的文章后面跟大家进行分享。

体验环境
mac os
npm - 6.0.1
node - v8.9.4

项目地址：https://github.com/durban89/webpack4-demo

webpack4 初体验 - 管理输出

Fri, 04 Jul 2025 14:27:05 +0000

我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。

首先，让我们调整一下我们的项目：

├── dist
│ ├── 448c34a56d699c29117adc64c43affeb.woff2
│ ├── 84cfb15e659da6455e7ad3a9d702b9c6.png
│ ├── bundle.js
│ ├── fa2772327f55d8198301fdb8bcfc8158.woff
│ ├── index.html
│ └── main.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── data.xml
│ ├── demo-image.png
│ ├── font.woff2
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ ├── glyphicons-halflings-regular.woff2
│ ├── index.css
│ ├── index.js
│ └── print.js
└── webpack.config.js

我们在 src/print.js 文件中添加一些逻辑：

src/print.js

export default function printMe() {
 console.log('I get called from print.js!');
}

并且在 src/index.js 文件中使用这个函数：src/index.js

import _ from 'lodash';
import './index.css';
import DemoImage from './demo-image.png';
import Data from './data.xml';
import printMe from './print.js';

function component() {
 let element = document.createElement('div');
 let btn = document.createElement('button');

 // Lodash, now imported by this script
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 element.classList.add('red-color');

 let img = new Image();
 img.src = DemoImage;
 element.appendChild(img);

 console.log(Data);

 btn.innerHTML = '点击我并查看控制台!';
 btn.onclick = printMe;
 element.appendChild(btn);

 return element;
}

document.body.appendChild(component());

我们还要更新 dist/index.html 文件，来为 webpack 分离入口做好准备：dist/index.html

<!doctype html>
<html>

<head>
 <title>输出管理</title>
 <script src="./print.bundle.js"></script>
</head>

<body>
 <script src="./app.bundle.js"></script>
</body>

</html>

现在调整配置。我们将在 entry 添加 src/print.js 作为新的入口起点（print），然后修改 output，以便根据入口起点名称动态生成 bundle 名称：
webpack.config.js

const path = require('path');

module.exports = {
 entry: {
 app: './src/index.js',
 print: './src/print.js'
 },
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ]
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ]
 }
 ],
 }
};

执行 npm run build，然后看到生成如下：

$ npm run build

> xxx@xxx build /Users/durban/nodejs/webpack4-demo
> webpack

Hash: 9d8ee08ba9107370fec6
Version: webpack 4.9.1
Time: 3696ms
Built at: 2018-05-27 13:32:23
 Asset Size Chunks Chunk Names
 84cfb15e659da6455e7ad3a9d702b9c6.png 1.55 MiB [emitted] [big]
 fa2772327f55d8198301fdb8bcfc8158.woff 22.9 KiB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 17.6 KiB [emitted]
 print.bundle.js 660 bytes 0 [emitted] print
 app.bundle.js 76.8 KiB 1, 0 [emitted] app
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
 [0] ./src/print.js 83 bytes {0} {1} [built]
 [1] ./src/demo-image.png 82 bytes {1} [built]
 [2] ./src/data.xml 110 bytes {1} [built]
 [6] ./src/glyphicons-halflings-regular.woff 83 bytes {1} [built]
 [7] ./src/glyphicons-halflings-regular.woff2 84 bytes {1} [built]
[10] ./node_modules/css-loader!./src/index.css 627 bytes {1} [built]
[11] ./src/index.css 1.05 KiB {1} [built]
[12] (webpack)/buildin/module.js 519 bytes {1} [built]
[13] (webpack)/buildin/global.js 509 bytes {1} [built]
[14] ./src/index.js 654 bytes {1} [built]
 + 5 hidden modules

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
 84cfb15e659da6455e7ad3a9d702b9c6.png (1.55 MiB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

我们可以看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，这也和我们在 index.html 文件中指定的文件名称相对应。如果你在浏览器中打开 index.html，就可以看到在点击按钮时会发生什么。

但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

配置HtmlWebpackPlugin
首先安装插件，并且调整 webpack.config.js 文件：webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: {
 app: './src/index.js',
 print: './src/print.js'
 },
 plugins: [
 new HtmlWebpackPlugin({
 title: '输出管理'
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ]
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ]
 }
 ],
 }
};

在我们构建之前，你应该了解，虽然在 dist/ 文件夹我们已经有 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成 index.html 文件。这就是说，它会用新生成的 index.html 文件，把我们的原来的替换。让我们看下在执行 npm run build 后会发生什么：

$ npm run build

> xxx@xxx build /Users/durban/nodejs/webpack4-demo
> webpack

Hash: 0f3c73600a9071697137
Version: webpack 4.9.1
Time: 882ms
Built at: 2018-05-27 13:37:08
 Asset Size Chunks Chunk Names
 84cfb15e659da6455e7ad3a9d702b9c6.png 1.55 MiB [emitted] [big]
 fa2772327f55d8198301fdb8bcfc8158.woff 22.9 KiB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 17.6 KiB [emitted]
 print.bundle.js 660 bytes 0 [emitted] print
 app.bundle.js 76.8 KiB 1, 0 [emitted] app
 index.html 241 bytes [emitted]
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
 [0] ./src/print.js 83 bytes {0} {1} [built]
 [1] ./src/demo-image.png 82 bytes {1} [built]
 [2] ./src/data.xml 110 bytes {1} [built]
 [6] ./src/glyphicons-halflings-regular.woff 83 bytes {1} [built]
 [7] ./src/glyphicons-halflings-regular.woff2 84 bytes {1} [built]
[10] ./node_modules/css-loader!./src/index.css 627 bytes {1} [built]
[11] ./src/index.css 1.05 KiB {1} [built]
[12] (webpack)/buildin/module.js 519 bytes {1} [built]
[13] (webpack)/buildin/global.js 509 bytes {1} [built]
[14] ./src/index.js 654 bytes {1} [built]
 + 5 hidden modules

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
 84cfb15e659da6455e7ad3a9d702b9c6.png (1.55 MiB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child html-webpack-plugin for "index.html":
 1 asset
 Entrypoint undefined = index.html
 [0] (webpack)/buildin/module.js 519 bytes {0} [built]
 [1] (webpack)/buildin/global.js 509 bytes {0} [built]
 + 2 hidden modules

如果你在代码编辑器中将 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

如果你想要了解更多 HtmlWebpackPlugin 插件提供的全部功能和选项，那么你就应该多多熟悉 HtmlWebpackPlugin[https://github.com/jantimon/html-webpack-plugin] 仓库。

你还可以看一下 html-webpack-template，除了默认模板之外，还提供了一些额外的功能。

清理 /dist 文件夹

在之前的几篇关于webpack的文章中，会发现/dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。

clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。

配置CleanWebpackPlugin

npm install clean-webpack-plugin --save-dev

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
 entry: {
 app: './src/index.js',
 print: './src/print.js'
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'Webpack-输出管理'
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ]
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ]
 }
 ],
 }
};

现在执行 npm run build，再检查 /dist 文件夹。如果一切顺利，你现在应该不会再看到旧的文件，只有构建后生成的文件！

$ npm run build

> xxx@xxx build /Users/durban/nodejs/webpack4-demo
> webpack

clean-webpack-plugin: /Users/durban/nodejs/webpack4-demo/dist has been removed.
Hash: 0f3c73600a9071697137
Version: webpack 4.9.1
Time: 887ms
Built at: 2018-05-27 13:44:59
 Asset Size Chunks Chunk Names
 84cfb15e659da6455e7ad3a9d702b9c6.png 1.55 MiB [emitted] [big]
 fa2772327f55d8198301fdb8bcfc8158.woff 22.9 KiB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 17.6 KiB [emitted]
 print.bundle.js 660 bytes 0 [emitted] print
 app.bundle.js 76.8 KiB 1, 0 [emitted] app
 index.html 249 bytes [emitted]
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
 [0] ./src/print.js 83 bytes {0} {1} [built]
 [1] ./src/demo-image.png 82 bytes {1} [built]
 [2] ./src/data.xml 110 bytes {1} [built]
 [6] ./src/glyphicons-halflings-regular.woff 83 bytes {1} [built]
 [7] ./src/glyphicons-halflings-regular.woff2 84 bytes {1} [built]
[10] ./node_modules/css-loader!./src/index.css 627 bytes {1} [built]
[11] ./src/index.css 1.05 KiB {1} [built]
[12] (webpack)/buildin/module.js 519 bytes {1} [built]
[13] (webpack)/buildin/global.js 509 bytes {1} [built]
[14] ./src/index.js 654 bytes {1} [built]
 + 5 hidden modules

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
 84cfb15e659da6455e7ad3a9d702b9c6.png (1.55 MiB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child html-webpack-plugin for "index.html":
 1 asset
 Entrypoint undefined = index.html
 [0] (webpack)/buildin/module.js 519 bytes {0} [built]
 [1] (webpack)/buildin/global.js 509 bytes {0} [built]
 + 2 hidden modules

体验环境
mac os
npm - 6.0.1
node - v8.9.4

项目地址:https://github.com/durban89/webpack4-demo.git

webpack4 初体验 - 资源管理 - 加载数据

Fri, 04 Jul 2025 14:26:58 +0000

继续上一篇博文[webpack4 初体验 - 资源管理 - 加载字体]

可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理这三类文件：

npm install --save-dev csv-loader xml-loader

webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ]
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ]
 }
 ],
 }
};

给你的项目添加一些数据文件

├── dist
│ ├── 448c34a56d699c29117adc64c43affeb.woff2
│ ├── 84cfb15e659da6455e7ad3a9d702b9c6.png
│ ├── bundle.js
│ ├── fa2772327f55d8198301fdb8bcfc8158.woff
│ ├── index.html
│ └── main.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── data.xml
│ ├── demo-image.png
│ ├── font.woff2
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ ├── glyphicons-halflings-regular.woff2
│ ├── index.css
│ └── index.js
└── webpack.config.js

src/data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
 <to>BJ</to>
 <from>SH</from>
 <heading>Reminder</heading>
 <body>Call Durban on Tuesday</body>
</note>

现在，你可以 import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种，所导入的 Data 变量将包含可直接使用的已解析 JSON：src/index.js

import _ from 'lodash';
import './index.css';
import DemoImage from './demo-image.png';
import Data from './data.xml';

function component() {
 let element = document.createElement('div');

 // Lodash, now imported by this script
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 element.classList.add('red-color');

 let img = new Image();
 img.src = DemoImage;
 element.appendChild(img);

 console.log(Data);

 return element;
}

document.body.appendChild(component());

再次重新构建

$ npm run build

> xxx@xxx build /Users/durban/nodejs/webpack4-demo
> webpack

Hash: 0325e1f96ed155017d91
Version: webpack 4.9.1
Time: 3802ms
Built at: 2018-05-27 13:16:12
 Asset Size Chunks Chunk Names
 84cfb15e659da6455e7ad3a9d702b9c6.png 1.55 MiB [emitted] [big]
 fa2772327f55d8198301fdb8bcfc8158.woff 22.9 KiB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 17.6 KiB [emitted]
 bundle.js 76.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
 [0] ./src/demo-image.png 82 bytes {0} [built]
 [1] ./src/data.xml 110 bytes {0} [built]
 [5] ./src/glyphicons-halflings-regular.woff 83 bytes {0} [built]
 [6] ./src/glyphicons-halflings-regular.woff2 84 bytes {0} [built]
 [9] ./node_modules/css-loader!./src/index.css 627 bytes {0} [built]
[10] ./src/index.css 1.05 KiB {0} [built]
[11] (webpack)/buildin/module.js 519 bytes {0} [built]
[12] (webpack)/buildin/global.js 509 bytes {0} [built]
[13] ./src/index.js 488 bytes {0} [built]
 + 5 hidden modules

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
 84cfb15e659da6455e7ad3a9d702b9c6.png (1.55 MiB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

当你打开 index.html 并查看开发者工具中的控制台，你应该能够看到你导入的数据被打印在了上面！

在使用 d3 等工具来实现某些数据可视化时，预加载数据会非常有用。我们可以不用再发送 ajax 请求，然后于运行时解析数据，而是在构建过程中将其提前载入并打包到模块中，以便浏览器加载模块后，可以立即从模块中解析数据。

总结

之前几篇webpack资源管理的内容中最出色之处是，以对应的各种方式加载资源，你可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起。例如，类似这样的结构会非常有用：

|– /components
| |– /my-component
| | |– index.jsx
| | |– index.css
| | |– icon.svg
| | |– img.png
-

这种配置方式会使你的代码更具备可移植性，因为现有的统一放置的方式会造成所有资源紧密耦合在一起。假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。只要你已经安装了任何扩展依赖(external dependencies)，并且你已经在配置中定义过相同的 loader，那么项目应该能够良好运行。

但是，假如你无法使用新的开发方式，只能被固定于旧有开发方式，或者你有一些在多个组件（视图、模板、模块等）之间共享的资源。你仍然可以将这些资源存储在公共目录(base directory)中，甚至配合使用 alias 来使它们更方便 import 导入。

体验环境
mac os
npm - 6.0.1
node - v8.9.4

项目地址:https://github.com/durban89/webpack4-demo.git

webpack4 初体验 - 资源管理 - 加载字体

Fri, 04 Jul 2025 14:02:37 +0000

继续上一篇博文[webpack4 初体验 - 资源管理 - 加载图片]

像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体。让我们更新 webpack.config.js 来处理字体文件：

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ]
 }
 ],
 }
};

在项目中添加一些字体文件：

项目目录结构

├── dist
│ ├── 84cfb15e659da6455e7ad3a9d702b9c6.png
│ ├── bundle.js
│ ├── index.html
│ └── main.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── demo-image.png
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ ├── glyphicons-halflings-regular.woff2
│ ├── index.css
│ └── index.js
└── webpack.config.js

通过配置好 loader 并将字体文件放在合适的地方，你可以通过一个 @font-face 声明引入。本地的 url(…) 指令会被 webpack 获取处理，就像它处理图片资源一样：

src/index.css

@font-face {
 font-family: 'index-font';
 src: url('./glyphicons-halflings-regular.woff2') format('woff2'), url('./glyphicons-halflings-regular.woff') format('woff');
 font-weight: '600';
 font-style: normal;
}

.red-color {
 color: red;
 font-family: 'index-font';
 background: url('./demo-image.png');
}

现在让我们重新构建来看看 webpack 是否处理了我们的字体：

$ npm run build

> xx@xx build /Users/durban/nodejs/webpack4-demo
> webpack

Hash: 1172ab68582d197a2b60
Version: webpack 4.9.1
Time: 3729ms
Built at: 2018-05-27 13:08:28
 Asset Size Chunks Chunk Names
 84cfb15e659da6455e7ad3a9d702b9c6.png 1.55 MiB [emitted] [big]
 fa2772327f55d8198301fdb8bcfc8158.woff 22.9 KiB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 17.6 KiB [emitted]
 bundle.js 76.4 KiB 0 [emitted] main
Entrypoint main = bundle.js
 [0] ./src/demo-image.png 82 bytes {0} [built]
 [4] ./src/glyphicons-halflings-regular.woff 83 bytes {0} [built]
 [5] ./src/glyphicons-halflings-regular.woff2 84 bytes {0} [built]
 [8] ./node_modules/css-loader!./src/index.css 627 bytes {0} [built]
 [9] ./src/index.css 1.05 KiB {0} [built]
[10] (webpack)/buildin/module.js 519 bytes {0} [built]
[11] (webpack)/buildin/global.js 509 bytes {0} [built]
[12] ./src/index.js 433 bytes {0} [built]
 + 5 hidden modules

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
 84cfb15e659da6455e7ad3a9d702b9c6.png (1.55 MiB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

重新打开 index.html 看看我们的 Hello webpack 文本显示是否换上了新的字体。如果一切顺利，你应该能看到变化。

体验环境
mac os
npm - 6.0.1
node - v8.9.4

项目地址:https://github.com/durban89/webpack4-demo.git

webpack4 初体验 - 资源管理 - 加载图片

Fri, 04 Jul 2025 14:02:30 +0000

继续上一篇博文[webpack4 初体验 - 资源管理 - 加载CSS]

如果现在我们正在下载 CSS，但是我们的背景和图标这些图片，要如何处理呢？使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中：

npm install --save-dev file-loader

webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ]
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ]
 }
 ],
 }
};

现在，当你 import DemoImage from ‘./demo-image.png’，该图像将被处理并添加到 output 目录，_并且_ DemoImage 变量将包含该图像在处理后的最终 url。当使用 css-loader 时，如上篇文章所示，你的 CSS 中的 url(’./demo-image.png’) 会使用类似的过程去处理。loader 会识别这是一个本地文件，并将 ‘./demo-image.png’ 路径，替换为输出目录中图像的最终路径。html-loader 以相同的方式处理。

我们向项目添加一个图像，然后看它是如何工作的，你可以使用任何你喜欢的图像：

项目目录结构

├── dist
│ ├── bundle.js
│ ├── index.html
│ └── main.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── demo-image.png
│ ├── index.css
│ └── index.js
└── webpack.config.js

src/index.js

import _ from 'lodash';
import './index.css';
import DemoImage from './demo-image.png'

function component() {
 let element = document.createElement('div');

 // Lodash, now imported by this script
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 element.classList.add('red-color');

 let img = new Image();
 img.src = DemoImage;
 element.appendChild(img);

 return element;
}

document.body.appendChild(component());

重新构建，并再次打开 index.html 文件

$ npm run build

> xx@xx build /Users/durban/nodejs/webpack4-demo
> webpack

Hash: 39cd25fedf5aaf1e45d6
Version: webpack 4.9.1
Time: 3710ms
Built at: 2018-05-27 12:50:13
 Asset Size Chunks Chunk Names
84cfb15e659da6455e7ad3a9d702b9c6.png 1.55 MiB [emitted] [big]
 bundle.js 76.1 KiB 0 [emitted] main
Entrypoint main = bundle.js
 [0] ./src/demo-image.png 82 bytes {0} [built]
 [6] ./node_modules/css-loader!./src/index.css 324 bytes {0} [built]
 [7] ./src/index.css 1.05 KiB {0} [built]
 [8] (webpack)/buildin/module.js 519 bytes {0} [built]
 [9] (webpack)/buildin/global.js 509 bytes {0} [built]
[10] ./src/index.js 433 bytes {0} [built]
 + 5 hidden modules

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
 84cfb15e659da6455e7ad3a9d702b9c6.png (1.55 MiB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

如果一切顺利，和 Hello webpack 文本旁边的 img 元素一样，现在看到的图标是重复的背景图片。如果你检查此元素，你将看到实际的文件名已更改为像 84cfb15e659da6455e7ad3a9d702b9c6.png 一样。这意味着 webpack 在 src 文件夹中找到我们的文件，并成功处理过它！

下一步是，压缩和优化你的图像。可以通过 image-webpack-loader 和 url-loader 实现，具体的下次在继续。

体验环境
mac os
npm - 6.0.1
node - v8.9.4

项目地址:https://github.com/durban89/webpack4-demo.git

webpack4 初体验 - 资源管理 - 加载CSS

Fri, 04 Jul 2025 14:02:26 +0000

继续上一篇博文[webpack4 初体验]

加载 CSS
为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中安装并添加 style-loader 和 css-loader：

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

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 }
 ],
 }
};

这使你可以在依赖于此样式的文件中 import ‘./index.css’。现在，当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。

我们尝试一下，通过在项目中添加一个新的 index.css 文件，并将其导入到我们的 index.js 中：

项目目录结构

├── dist
│ ├── bundle.js
│ ├── index.html
│ └── main.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── index.css
│ └── index.js
└── webpack.config.js

src/style.css

.red-color {
 color: red;
}

src/index.js

import _ from 'lodash';
import './index.css';

function component() {
 var element = document.createElement('div');

 // Lodash, now imported by this script
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 element.classList.add('red-color');

 return element;
}

document.body.appendChild(component());

现在运行构建命令：

$ npm run build

> xx@xx build /Users/durban/nodejs/webpack4-demo
> webpack

Hash: a4ca66fcccee921aa2ec
Version: webpack 4.9.1
Time: 3696ms
Built at: 2018-05-27 12:37:20
 Asset Size Chunks Chunk Names
bundle.js 75.7 KiB 0 [emitted] main
Entrypoint main = bundle.js
[4] ./node_modules/css-loader!./src/index.css 189 bytes {0} [built]
[5] ./src/index.css 1.05 KiB {0} [built]
[6] (webpack)/buildin/module.js 519 bytes {0} [built]
[7] (webpack)/buildin/global.js 509 bytes {0} [built]
[8] ./src/index.js 315 bytes {0} [built]
 + 4 hidden modules

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

再次在浏览器中打开 index.html，你应该看到 Hello webpack 现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，因为它不会显示结果），并查看页面的 head 标签。它应该包含我们在 index.js 中导入的 style 块元素。

请注意，在多数情况下，你也可以进行 CSS 分离，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 处理器风格 - postcss, sass 和 less 等。

体验环境
mac os
npm - 6.0.1
node - v8.9.4

项目地址:https://github.com/durban89/webpack4-demo.git

webpack4 初体验

Fri, 04 Jul 2025 14:02:19 +0000

1、创建项目并安装webpack

mkdir webpack4-demo && cd webpack4-demo
npm init -y
npm install webpack webpack-cli --save-dev

webpack4-demo
 |- package.json
 |- index.html
 |- /src
 |- index.js

src/index.js

function component() {
 var element = document.createElement('div');

 // Lodash
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');

 return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
 <head>
 <title>起步</title>
 <script src="https://unpkg.com/xx@xx"></script>
 </head>
 <body>
 <script src="./src/index.js"></script>
 </body>
</html>

我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。
package.json

{
 "name": "webpack-demo",
 "version": "1.0.0",
 "description": "",
 "private": true,
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "webpack": "^4.0.1",
 "webpack-cli": "^2.0.9"
 },
 "dependencies": {}
}

2、创建一个打包文件

首先，我们稍微调整下目录结构，将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载：

webpack4-demo
 |- package.json
 |- /dist
 |- index.html
 |- /src
 |- index.js

要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

npm install --save lodash

现在，在我们的脚本中 import lodash：
src/index.js

import _ from 'lodash';

function component() {
 var element = document.createElement('div');

 // Lodash, now imported by this script
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');

 return element;
}

document.body.appendChild(component());

现在，由于通过打包来合成脚本，我们必须更新 index.html 文件。因为现在是通过 import 引入 lodash，所以将 lodash <script> 删除，然后修改另一个 <script> 标签来加载 bundle，而不是原始的 /src 文件：

<!doctype html>
<html>

<head>
 <title>起步</title>
</head>

<body>
 <script src="main.js"></script>
</body>

</html>

$ npx webpack
Hash: 7262ef43d0038d60faef
Version: webpack 4.9.1
Time: 3375ms
Built at: 2018-05-27 12:07:49
 Asset Size Chunks Chunk Names
main.js 70 KiB 0 [emitted] main
Entrypoint main = main.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 255 bytes {0} [built]
 + 1 hidden module

在浏览器中打开 index.html，如果一切访问都正常，你应该能看到以下文本：‘Hello webpack’。

ES2015 中的 import 和 export 语句已经被标准化。虽然大多数浏览器还无法支持它们，但是 webpack 却能够提供开箱即用般的支持。

事实上，webpack 在幕后会将代码“转译”，以便旧版本浏览器可以执行。如果你检查 dist/main.js，你可以看到 webpack 具体如何实现，这是独创精巧的设计！除了 import 和 export，webpack 还能够很好地支持多种其他模块语法，更多信息请查看模块 API。

注意，webpack 不会更改代码中除 import 和 export 语句以外的部分。如果你在使用其它 ES2015 特性，请确保你在 webpack 的 loader 系统中使用了一个像是 Babel 或 Bublé 的转译器

3、创建webpack配置文件

在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件

webpack4-demo
 |- package.json
 |- webpack.config.js
 |- /dist
 |- index.html
 |- /src
 |- index.js

webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 }
};

编译下看看

$ npx webpack --config webpack.config.js
Hash: b983ef9ac0012695b0e5
Version: webpack 4.9.1
Time: 3369ms
Built at: 2018-05-27 12:09:40
 Asset Size Chunks Chunk Names
bundle.js 70 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 255 bytes {0} [built]
 + 1 hidden module

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

4、NPM 脚本配置
考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：
package.json

{
 "name": "webpack4-demo",
 "version": "1.0.0",
 "private": true,
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "build": "webpack"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "description": "",
 "devDependencies": {
 "css-loader": "^0.28.11",
 "style-loader": "^0.21.0",
 "webpack": "^4.9.1",
 "webpack-cli": "^2.1.4"
 },
 "dependencies": {
 "lodash": "^4.17.10"
 }
}

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。注意，使用 npm 的 scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm 包。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本（如果必要，每个 flag 都带有 –config 标志）。

$ npm run build

> xx@xx build /Users/durban/nodejs/webpack4-demo
> webpack

Hash: b983ef9ac0012695b0e5
Version: webpack 4.9.1
Time: 350ms
Built at: 2018-05-27 12:10:14
 Asset Size Chunks Chunk Names
bundle.js 70 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 255 bytes {0} [built]
 + 1 hidden module

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 to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

// 重点
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build – –colors。

整个体验下来还可以，后面继续体验，最后的目录结果如下

├── dist
│ ├── bundle.js
│ ├── index.html
│ └── main.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ └── index.js
├── webpack-demo
└── webpack.config.js

体验环境
mac os
npm - 6.0.1
node - v8.9.4

项目地址:https://github.com/durban89/webpack4-demo.git

Webpack+Gulp 实现静态文件打包并自动上传到七牛完美示例

Wed, 02 Jul 2025 15:40:19 +0000

经过几天的努力终于实现了一个完美的作品，webpack可以与gulp完美结合的进行打包静态文件，并将静态文件上传到七牛云存储，当然也可以传到你想传的云存储了，这里只分享一个七牛的云存储方案。

关于如何使用webpack打包静态代码，这个可以参考我之前的一些文章和方案，不行的话可以进群交流。

这里只分享一下gulp这边的操作，然后给一个例子实现如何一条命令打包静态文件并更新cdn文件的方法。

先展示一下gulpfile.js文件

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const shrink = require('gulp-cssshrink');
const webpack = require('gulp-webpack');
const qn = require('gulp-qn');
// MD5戳
const rev = require('gulp-rev-qn');
const revCollector = require('gulp-rev-collector');
const runSequence = require('run-sequence');
const config = require('./webpack.config');
const qiniu_options = {
 accessKey: 'xxx',
 secretKey: 'xxx',
 bucket: 'xxx',
 domain: 'http://xxx.com'
};
gulp.task('publish-js', function () {
 return gulp.src(['./build/js/*.js'])
 .pipe(uglify())
 .pipe(rev())
 .pipe(gulp.dest('./build/js'))
 .pipe(qn({
 qiniu: qiniu_options,
 prefix: 'js'
 }))
 .pipe(rev.manifest())
 .pipe(gulp.dest('./build/rev/js'));
});
gulp.task('publish-font-img', function () {
 return gulp.src(['./build/js/*.svg','./build/js/*.gif','./build/js/*.woff2','./build/js/*.ttf','./build/js/*.eot','./build/js/*.woff'])
 .pipe(qn({
 qiniu: qiniu_options,
 prefix: 'js'
 }));
});
gulp.task('publish-css', function () {
 return gulp.src(['./build/js/*.css'])
 .pipe(rev())
 .pipe(gulp.dest('./build/js'))
 .pipe(qn({
 qiniu: qiniu_options,
 prefix: 'css'
 }))
 .pipe(rev.manifest())
 .pipe(gulp.dest('./build/rev/css'));
});
gulp.task('publish-html', function () {
 return gulp.src(['./build/rev/**/*.json', './build/views/*.html'])
 .pipe(revCollector({
 dirReplacements: {
 '/js/': ''
 }
 }))
 .pipe(gulp.dest('./build/views'));
});
gulp.task('default',function(callback){
 runSequence(
 ['publish-css','publish-js','publish-font-img'],
 'publish-html',
 callback);
});

publish-js部分是将我的js文件进行版本更新并上传到七牛。

publish-font-img部分是将我的字体文件、图片文件上传到七牛

publish-css部分是将我的css文件进行版本更新并上传到七牛

publish-html将我html文件中对应的js路径进行替换，好了，可以直接发布这个build文件夹下的文件了。

Webpack hot server 设置

Wed, 02 Jul 2025 11:26:34 +0000

使用node的express或connect作为server来启动项目的如何去设置webpack-dev-server

这里举例子说明【为这里使用的是connect，express同理】，三个文件

development.js //启动文件
webpack.config.development.js //开发模式的配置文件
webpack.dev.server.js //webpack-dev-server 启动的辅助文件

先来看development.js文件

'use strict';
var http = require('http');
var connect = require('connect');
var urllib = require('urllib');
var staticServe = require('serve-static');
var finalhandler = require('finalhandler');
var debug = require('debug')('proxy');
var args = require("tinyclap")(); // 启动参数parser
var proxy = require('proxy-middleware');
var path = require('path');
var url = require('url');
var bodyParser = require('body-parser');
var app = connect();
//=====================配置阶段
var config = require('./config');
if (args.argv && args.argv['f']) {
 config = require(args.argv['f']);
}
var stServe = staticServe('./app', {index: 'index.html'});
app.use(bodyParser.urlencoded({extended: false}));
//这里是主要的
// Any requests to localhost:3000/build is proxied
// to webpack-dev-server
require('./webpack.dev.server')(app);
//=====================启动阶段
app.use(function(req, res) {
 var done = finalhandler(req, res);
 stServe(req, res, done);
});
http.createServer(app).listen(config.port);
console.log('Server listen on port %d.', config.port);

这里

require('./webpack.dev.server')(app);

是关键

再来看webpack.config.development.js：

'use strict';
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');
var bower_components_dir = path.join(__dirname, 'app/js/bower_components');
module.exports = {
 devtool:'eval',
 entry: {
 'main':[
 "webpack/hot/dev-server",
 'webpack-dev-server/client?http://127.0.0.1:8080',
 './app/js/index.js'
 ] //演示单入口文件
 },
 output: {
 path: path.join(__dirname, 'app/js/out'), //打包输出的路径
 filename: '[name].js', //打包后的名字
 publicPath: "/js/out/" //html引用路径，在这里是本地地址。
 },
 plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new ExtractTextPlugin("styles.css"),
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoErrorsPlugin()
 ],
 // 新添加的module属性
 module: {
 loaders: [
 {test: /\.es6$/, exclude: /bower_components/, loader: "babel"},
 {test: /\.jsx?$/, exclude: /bower_components/, loader: "jsx-loader?insertPragma=React.DOM&harmony"}
 ]
 }
};

这里主要是entry部分和output部分

接下来再看webpack.dev.server.js；

'use strict';
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.development');
var proxy = require('proxy-middleware');
var url = require('url');
var urllib = require('urllib');
var debug = require('debug');
module.exports = function(app) {
 //异步 静态文件
 app.use('/js/out', proxy('http://127.0.0.1:8080/js/out'));
 var server = new WebpackDevServer(webpack(config), {
 publicPath: config.output.publicPath,
 hot: true,
 noInfo: false,
 historyApiFallback: true,
 stats: { colors: true },
 headers: { 'Access-Control-Allow-Origin': '*' }
 }).listen(8080, '127.0.0.1', function(err,result) {
 if (err) {
 console.log(err);
 }
 console.log('Webpack Listening at 127.0.0.1:8080');
 });
}

这里主要是函数区域部分，做了一个proxy处理，将所有的js和css文件转到webpack-dev-server服务端

最后index.html文件里面的js和css静态文件照常处理就好，只要能解析到/js/out上面就好

webpack分离css单独打包

Tue, 01 Jul 2025 15:25:05 +0000

这个操作很简单的，只需要一个插件就好了，就是extract-text-webpack-plugin

1，安装extract-text-webpack-plugin

cnpm install extract-text-webpack-plugin --save-dev

2,配置文件添加对应配置

首先require一下

var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins里面添加

new ExtractTextPlugin("styles.css"),

我这里如下：

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new ExtractTextPlugin("styles.css"),
],

modules里面对css的处理修改为

{test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},

千万不要重复了，不然会不起作用的

我这里如下：

module: {
 loaders: [
 {test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
 {test: /\.scss$/, loader: "style!css!sass"},
 {test: /\.less$/, loader: "style!css!less"},
 ]
},

3，在引入文件里面添加需要的css，【举例如下】

require('../less/app.less');
require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');
require('./bower_components/fancybox/source/jquery.fancybox.css');

Webpack 打包jsx文件配置

Tue, 01 Jul 2025 15:25:02 +0000

打包jsx文件，为了使得此文件可以直接被打包，并且在应用的时候不加入后缀，需要做以下几个步骤：

1，安装jsx-loader

$ npm install --save-dev jsx-loader

2，配置

module: {
 loaders: [
 {
 //tell webpack to use jsx-loader for all *.jsx files
 test: /\.jsx$/,
 loader: 'jsx-loader?insertPragma=React.DOM&harmony'
 }
 ]
},

3，扩展设置

resolve: {
 extensions: ['', '.js', '.jsx']
}

Webpack-dev-server 配置

Tue, 01 Jul 2025 15:24:59 +0000

1，安装需要的包

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

2，配置添加

output: {
 filename: 'bundle.js', //this is the default name, so you can skip it
 //at this directory our bundle file will be available
 //make sure port 8090 is used when launching webpack-dev-server
 publicPath: 'http://localhost:8090/assets' //重点在这里
},

3，安装 http-server

npm install --save-dev http-server

4，页面添加启动脚本

<!DOCTYPE html>
<html>
<head>
 <title>Basic Property Grid</title>
 <!-- include react -->
 <script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
 <div id="content">
 <!-- this is where the root react component will get rendered -->
 </div>
 <!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
 <!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
 <script src="http://localhost:8090/webpack-dev-server.js"></script>
 <!-- include the bundle that contains all our scripts, produced by webpack -->
 <!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
 <script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>
</body>
</html>

Webpack highcharts 打包处理

Tue, 01 Jul 2025 15:24:56 +0000

//模块导入 Highcharts

global.HighchartsAdapter = require('exports?HighchartsAdapter!../../bower_components/highcharts/adapters/standalone-framework.src');
module.exports = require('exports?Highcharts!../../bower_components/highcharts/highcharts.src');

在entry.js文件中加入这行代码

../../bower_components/highcharts/adapters/standalone-framework.src
../../bower_components/highcharts/highcharts.src

这两行在上面的位置代表文件的位置

Webpack 打包基础测试

Tue, 01 Jul 2025 15:24:48 +0000

使用webpack

首先新建一个app的项目,在项目下面执行如下代码：

$ npm init // 用于初始化项目的package.json

//初始化文件目录：

app
 --- css
 --- main.scss
 --- js
 --- index.js
 --- a.js
 --- b.js
 --- c.js
 --- es6_module.js
 --- index.html
 --- package.json
 --- webpack.config.js

安装webpack

我们通过npm来将webpack安装到全局

$ npm install webpack -g

webpack配置

webpack是需要进行配置的，我们在使用webpack的时候，会默认webpack.config.js为我们的配置文件。所以接下来，我们新建这个js文件。

// webpack.config.js
var path = require("path");
module.exports = {
 entry: './js/index.js', //演示单入口文件
 output: {
 path: path.join(__dirname, 'js/out'), //打包输出的路径
 filename: 'bundle.js', //打包后的名字
 publicPath: "/js/out/" //html引用路径，在这里是本地地址。
 }
};

编写入口文件

接下来就编写我们的入口文件index.js和第一个模块文件a.js。我们一切从简，里面只用来加载一个Js模块。

// index.js
require("./a"); // 使用CommonJs来加载模块
// a.js
console.log("Hello Webpack!");

启动webpack

一切准备好后，我们仅需要在项目根目录下，用命令行webpack执行一下即可。

// webpack 命令行的几种基本命令

$ webpack // 最基本的启动webpack方法
$ webpack -w // 提供watch方法，实时进行打包更新
$ webpack -p // 对打包后的文件进行压缩，提供production
$ webpack -d // 提供source map，方便调试。

webpack成功运行后，我们就可以看到根目录出现了out文件夹，里面有我们打包生成的bundle.js。我们最后通过在index.html里对这个文件引入就可以了。我们可以在控制台看到我们想要的结果，Hello Webpack !

多模块依赖

刚才的例子，我们仅仅是跑通了webpack通过index.js入口文件进行打包的例子。下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢？下面我们新建多几个js文件吧！

// 修改module1.js
require(["./a"], function(){
 console.log("Hello Webpack!");
});
// b.js，使用的是CommonJs机制导出包
module.exports = function(a, b){
 return a + b;
}
// a.js，使用AMD模块机制
define(['./b.js'], function(sum){
 return console.log("1 + 2 = " + sum(1, 2));
})

其实像上面这样混用两种不同机制非常不好，这里仅仅是展示用的，在开发新项目时还是推荐CommonJs或ES2015的Module。当然我个人更倾向于ES2015的模块机制的～

loader加载器

到了我最喜欢也是最激动人心的功能了！我们先想想应用场景，前端社区有许多预处理器供我们使用。我们可以使用这些预处理器做一些强大的事情，大家都听过的就是CoffeeScript和Sass了。我们以前要编译这些预处理器，就是用gulp进行编译。但是我们对这些文件处理其实也挺繁琐的，webpack可以一次性解决！

在这里我们用Sass和babel编译ES2015为例子，看一下loader是如何使用的。

安装loader

我们第一步就是先要安装好各个必须的loader，我们直接看看需要通过npm安装什么。

$ npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev

配置loader

安装完各个loader后，我们就需要配置一下我们的webpack.config.js，载入我们的loader。

// webpack.config.js
module.exports = {
 entry: path.join(__dirname, 'js/index.js'),
 output: {
 path: path.join(__dirname, 'js/out'),
 publicPath: "/js/out/",
 filename: 'bundle.js'
 },
 // 新添加的module属性
 module: {
 loaders: [
 {test: /\.js$/, loader: "babel"},
 {test: /\.css$/, loader: "style!css"},
 {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
 {test: /\.scss$/, loader: "style!css!sass"}
 ]
 }
};

我们主要看看module的loaders。loaders是一个数组，里面的每一个对象都用正则表达式，对应着一种配对方案。比如匹配到js后缀名就用babel-loader，匹配到scss后缀名的就先用sass，再用css，最后用style处理，不同的处理器通过!分隔并串联起来。这里的loader是可以省略掉-loader这样的，也就是原本应该写成style-loader!css-loader!sass-loader，当然我们必须惜字如金，所以都去掉后面的东东。

我们仅仅是配置一下，已经是可以直接用ES2015和SASS去写我们的前端代码了。在此之前，我们对js文件夹里再细分成js，css，image三个文件夹，处理好分层。话不多说，赶紧试试。

稍微复杂的webpack项目

babel-loader

// js/es6-module.js
class People{
 constructor(name){
 this.name = name;
 }
 sayHi(){
 console.log(`hi ${this.name} !`);
 }
}
module.exports = People;

写好模块后，我们直接在index.js入口文件中引入该模块。

// index.js
// javascript
require('./a');
let People = require('./es6-module');
let p = new People("Yika");
p.sayHi();
// css
require('./css/main.scss');

哈哈哈，不能再爽！这下子我们可以使用很多优秀的ES6特性去构建大型的web了。

sass-loader

大家或许注意到了下方的css的require，那就是用来加载Sass样式的。我们通过启动style-loader会将css代码转化到<style>标签内，我们看一下里面的内容。

// css/main.scss
html, body{
 background: #dfdfdf;
}

最后我们打开index.html观察我们所有的结果，首先背景已经是淡灰色的，并且控制台也有我们想要的内容。我们通过查看DOM结构，可以发现head标签里多出了style标签，里面正是我们想要定制的样式。

关于对图片的打包

我们之前也说，webpack对与静态资源来说，也是看作模块来加载的。CSS我们是已经看过了，那图片是怎么作为模块打包加载进来呢？这里我们可以想到，图片我们是用url-loader加载的。我们在css文件里的url属性，其实就是一种封装处理过require操作。当然我们还有一种方式就是直接对元素的src属性进行require赋值。

div.img{
 background: url(../image/xxx.jpg)
}
//或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);

上述两种方法都会对符合要求的图片进行处理。而要求就是在url-loader后面通过query参数的方式实现的，这里就是说只有不大于8kb的图片才会打包处理成Base64的图片。关于query，请看文档：Query parameters

{test: /\.(jpg|png)$/, loader: "url?limit=8192"}

打包成多个资源文件

我们在开发多页面的站点的时候，还是需要希望能有多个资源文件的。这样我们就可以有效利用缓存提升性能，做到文件按需加载。如何写入口文件，这里就不再赘述了，我们直接看如何对webpack.config.js进行修改。

// webpack.config.js
entry: {
 page1: "index.js",
 page2: "index2.js"
},
output: {
 path: path.join(__dirname, 'js/out'),
 publicPath: "/js/out/",
 filename: '[name].js'
}

这里重点关注两个地方，entry属性可以是一个对象，而对象名也就是key会作为下面output的filename属性的[name]。当然entry也可以是一个数组，更多用法都可以去webpack的官方文档进行查看。

当然webpack也考虑到公共模块的利用，我们利用插件就可以智能提取公共部分，以提供我们浏览器的缓存复用。我们只需要在webpack.config.js添加下面的代码即可。

// 修改添加，webpack.config.js
var webpack = require('webpack');
module.exports = {
 // ....省略各种代码
 plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js')
 ]
}

我们做个小测试，让第二个入口文件也加载我们之前的es6-module.js。然后我们用webpack进行打包，就发现生成的common.js里是有相应代码的。我们需要手动在html上去加载common.js，并且是必须要最先加载。

独立出css样式

如果我们希望样式通过<link>引入，而不是放在<style>标签内呢，即使这样做会多一个请求。这个时候我们就要配合插件一起使用啦，我们一起来看看。

$ npm install extract-text-webpack-plugin --save-dev

安装完插件就要配置webpack.config.js了。我们添加以下代码

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
 // ...省略各种代码
 module: {
 loaders: [
 {test: /\.js$/, loader: "babel"},
 {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
 {test: /\.(jpg|png|svg)$/, loader: "url?limit=8192"},
 {test: /\.scss$/, loader: "style!css!sass"}
 ]
 },
 plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new ExtractTextPlugin("[name].css")
 ]
}

为了区分开用<link>链接和用<style>，我们这里以CSS后缀结尾的模块用插件。我们重点关注一下使用了ExtractTextPlugin的模块，在ExtractTextPlugin的extract方法有两个参数，第一个参数是经过编译后通过style-loader单独提取出文件来，而第二个参数就是用来编译代码的loader。

记得运行webpack --config webpack.config.js进行打包

然后在index.html里面引用打包文件，如；

<script src="js/out/bundle.js"></script>

如果需要common.js的话，在前面也要加上这个文件，最后js的调用顺序如下：

<script src="js/out/common.js"></script>
<script src="js/out/bundle.js"></script>

Webpack on Dapeng Zhang

解决webpack打包文件过大的问题

Webpack4 之 编译Typescript

基础安装

如何使用第三方库

动手写实例

Webpack4渐进式网络应用程序

Webpack4构建代码分析webpack-bundle-analyzer

Webpack4缓存相关配置 - Manifest

Webpack4缓存相关配置

Webpack4生产环境构建相关配置 - Split CSS即分离样式

Webpack4生产环境构建相关配置 - 指定环境

Webpack4生产环境构建相关配置 - 代码压缩

Webpack4生产环境构建相关配置 - 基础配置

Webpack4代码分割实现按需加载/懒加载

Webpack4+React16+ReactRouter4 - historyApiFallback 多级路由

Webpack4+React16+ReactRouter4+Redux整合开发 - Redux Logger日志相关配置

Webpack4+React16+ReactRouter4+Redux整合开发 - react-hot-loader

Webpack4+React16+ReactRouter4+Redux整合开发

Webpack4+React16+ReactRouter4整合开发

webpack4手动配置安装react开发

webpack4打包library库

npx - 是node本身提供的一个功能，需要的具体了解的可以百度或者Google

webpack4 初体验 - 开发 - webpack-dev-server

webpack4 初体验 - 管理输出

webpack4 初体验 - 资源管理 - 加载数据

webpack4 初体验 - 资源管理 - 加载字体

webpack4 初体验 - 资源管理 - 加载图片

webpack4 初体验 - 资源管理 - 加载CSS

webpack4 初体验

Webpack+Gulp 实现 静态文件打包并自动上传到七牛完美示例

Webpack hot server 设置

webpack分离css单独打包

Webpack 打包jsx文件配置

Webpack-dev-server 配置

Webpack highcharts 打包处理

Webpack 打包基础测试

Webpack4 之编译Typescript

Webpack+Gulp 实现静态文件打包并自动上传到七牛完美示例