这两天一直在练习这个 webpack 4, 发现有好多 问题 和坑，做开发嘛，一定要有喜欢出 问题 并喜欢 解决 问题 ，坚决踩个坑填个坑的不怕死小强精神！ webpack 4 在配置上其实是可以是想production和development的， // webpack .config.js module.exports = { // webpack 会根据mode进行对Js 打包 ，development压缩，production下面自动压缩，亲测没有 问题 mode: 'development' // production 但是从js里面分离出来的 css 怎么 打包 呢？ 我找了一天的相关文章，好多都是说we

这篇文章只写了如何把 CSS 打包 成一个 CSS 文件，没有讲解如何 打包 成多个 CSS 文件，经简友提点，这里添加上了 打包 成多个 CSS 文件的方法。 webpack 把所有的资源都当成了一个模块, CSS ,Image, JS 字体文件 都是资源, 都可以 打包 到一个 bundle.js 文件中. 但是有 时 候需要把样式 单独的 打包 成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 一、extract-text- webpack -plugin 使用方法 这个操作很简单的，只需要一个插件就好了，就是extract-text- webpack -plugin 1. 安装extract-text-webp

webpack 把我们所有的文件都 打包 成一个 JS 文件，这样即使你是小项目， 打包 后的文件也会非常大。下面就来讲下如何从多个方面进行优化。 去除不必要的插件 刚开始用 webpack 的 时 候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境 打包 的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin, NoErrorsPlugin… 这 时 候不管用什么优化方式，都没多大效果。所以，如果你 打包 后的文件非常大的话，先检查下是不是包含了这些插件。 提取第三方库 像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起

项目引入 css 文件后报错 Module build failed (from ./node_modules/_ css -loader@2.1.1@ css -loader/dist/cjs.js): Css SyntaxError (2:1) Unknown word 1 |> 2 | var content = require("!!./index. css "); | ^ 3 | ...

Webpack 是一款非常流行的前端 打包 工具，它可以将 JavaScript、 CSS 、图片等多种资源文件进行 打包 ，并通过一系列的插件和配置来进行定制化。当我们在开发过程中使用 CSS 来设置背景图片 时 ，可能会遇到一些 问题 ，比如路径引用不正确、文件无法被正确加载等。 为了 解决 Webpack 打包 CSS 背景图片路径引用 问题 ，我们可以采取以下几种方式： 1. 直接使用相对路径 我们可以使用相对路径来引用背景图片。比如，如果我们的 CSS 文件和图片文件在同一个目录下，那么可以直接使用相对路径来引用。例如： background-image: url(./bg.png); 这里的 "./" 表示当前目录，后面跟上文件名即可。 2. 配置 publicPath 在 打包 的 时 候， Webpack 默认会将所有的图片等静态资源放到 output.path 指定的输出目录下，并根据 output.publicPath 配置的路径来进行访问。如果我们在使用背景图片的 时 候，出现了路径错误的 问题 ，可能就是因为 publicPath 配置不正确造成的。 我们需要在配置文件中设置一个 publicPath，这个路径就是我们最终在浏览器中访问静态资源的路径。比如，我们可以将 publicPath 设置为"/static/"，那么在 CSS 中引用背景图片的 时 候，可以这样写： background-image: url(/static/bg.png); 3. 使用 url-loader 和 file-loader 我们还可以使用 url-loader 和 file-loader 这两个 Loader 处理背景图片的路径 问题 。url-loader 可以将小于 limit 配置的图片转化为 Data URL，大于 limit 的图片会使用 file-loader 进行处理，最终输出成一个单独的图片文件。使用方式如下： test: /\.(png|jpg|gif|svg)$/, use: [ loader: 'url-loader', options: { limit: 8192, name: '[name].[hash:7].[ext]', outputPath: 'images/' 在以上代码中，我们配置了使用 url-loader 处理图片文件，并指定了 limit 为 8192，即小于 8KB 的图片会被转化为 Data URL；大于 8KB 的图片则使用 file-loader 进行处理，并输出至指定目录下。通过这种方式，我们可以避免在 CSS 中编写复杂的路径，也可以减少请求次数，提高页面性能。 通过以上几种方式，我们就可以轻松处理 Webpack 打包 CSS 背景图片路径引用的 问题 。基于不同的项目需求和实际情况，我们可以选择其中适合自己项目的方式来进行配置。