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

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

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bun

...

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

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

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

1、现在clone原始项目如下

git clone https://git
...

Webpack4+React16+ReactRouter4 - historyApiFallback 多级路由

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

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

但是在我们开发也许会遇到一个很奇怪的问题就是,当我们访问到二级以上的路由的情况下,在刷新页面会发现页面加载不出需要的js,此时会显示一个404,说文件不

...

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

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

首先clone代码

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

...

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

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

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

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

webpack4打包library库

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

1、创建并初

...

webpack4 初体验 - 管理输出

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

首先,让我们调整一下我们的项目:

├── dist
│   ├── 448c34a56d699c29117adc64c43aff
...

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

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

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

...

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

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

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

const path = require('path');

mod
...

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

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


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

npm install --save-dev file-loader

webpack.config.js

const path = require('path
...