标签: webpack-4

使用 webpack MiniCssExtractPlugin 和 OptimizeCSSAssetsPlugin 复制 css 文件

我遇到了 dist/css 下重复 css 文件的问题

我的webpack配置如下：

webpack.base.config.js

/* eslint quote-props: ['off'] */
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isProduction = process.env.NODE_ENV === 'production';

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: { …

Run Code Online (Sandbox Code Playgroud)

javascript css bundle webpack-4 mini-css-extract-plugin

Jav*_*ous

lucky-day

7
推荐指数

0
解决办法

2193
查看次数

Webpack开发服务器缓存清除

我无法使webpack开发服务器正常工作。我认为问题在于它在内存中产生的已编译代码无法清除。我无法弄清楚哪里出了问题。

我的配置文件是：

var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: "/",
        filename: 'js/index.js'
    },
    devServer: {
        contentBase: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader']
            },
            {
                test: /\.scss$/,
                use:  [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/styles.css',
          }),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
          })
    ]

}

Run Code Online (Sandbox Code Playgroud)

和我的脚本：

"scripts": {
    "dev": …

Run Code Online (Sandbox Code Playgroud)

webpack webpack-dev-server webpack-4

Rap*_*117

lucky-day

7
推荐指数

1
解决办法

3116
查看次数

webpack 4：找不到捆绑js

我最近升级到 webpack 4。页面已成功加载，每当发生更改时，它都会使用 webpack-dev-server 自动刷新页面。它做得很好，但在控制台中显示以下错误

获取http://localhost:8090/build/bundle.js 404（未找到）

有时，当 URL 中有 id 时，它会将 id 附加到捆绑 js url，如下所示

http://localhost:8090/16/build/bundle.js

我使用 Stack Overflow 答案和 GitHub 解决方案尝试了很多方法，但没有一个对我有用。以下是模块详细信息

“webpack”：“^4.15.0”，“webpack-cli”：“^3.0.8”，“webpack-dev-server”：“^3.1.4”，“babel-core”：“^6.26.3 ”、“babel-loader”：“^7.1.5”、“babel-plugin-transform-class-properties”：“^6.24.1”、“babel-plugin-transform-object-rest-spread”：“^ 6.26.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1"

webpack.config.js：

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

module.exports = {
    target: "web",
    entry: [
        "whatwg-fetch",
        'webpack-dev-server/client?http://localhost:8090',
        'webpack/hot/only-dev-server',
        'babel-polyfill',
        "./src/index.js"
        ],
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js",
        publicPath: "/"
        //make sure port 8090 is used when launching …

Run Code Online (Sandbox Code Playgroud)

reactjs babeljs webpack-dev-server babel-loader webpack-4

Hem*_*ari

2018 09-07

7
推荐指数

1
解决办法

1万
查看次数

Webpack URIError：无法解码参数'/%PUBLIC_URL%/favicon.ico'

webpack v4.20.2

webpack-dev-server v3.1.9

我正在使用webpack和运行React应用程序，webpack-dev-server并且遇到了有关的问题%PUBLIC_URL%。

URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'

Run Code Online (Sandbox Code Playgroud)

在%PUBLIC_URL%没有被编译的index.html，所以未能获得图标。

public / index.html

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
</head>

Run Code Online (Sandbox Code Playgroud)

package.json脚本

"scripts": {
    "dev": "webpack-dev-server --config ./config/webpack.dev.conf.js --open",
    "build": "webpack --config ./config/webpack.prod.conf.js"
  },

Run Code Online (Sandbox Code Playgroud)

项目结构

.
??? config
?   ??? webpack.dev.conf.js
?   ??? webpack.prod.conf.js
??? public
?    ??? index.html
?    ??? favicon.ico
?    ??? manifest.json
??? src
?    ??? index.js
?     ...
??? …

Run Code Online (Sandbox Code Playgroud)

reactjs webpack webpack-dev-server webpack-4

jun*_*lin

lucky-day

7
推荐指数

1
解决办法

1399
查看次数

如何使用 Webpack/SplitChunks 插件按目录动态拆分？

我正在尝试按以下方式使用 splitChunks 插件拆分我的 React 代码（使用 create-react-app 创建）：

我有以下组件（JSX）结构：

服务
- 服务A
  - 组分A1
  - 组分A2
  - 子文件夹
    - 组分A3
  - ...
- 服务B
  - 组件B1
  - 组件B2
  - ...
- 服务C
  - 组件B1
  - 组件B2
  - ...
- ...

我想要以下输出（构建）：

静态/js
- 服务A
  - serviceA.bundle.chunkhash.js
- 服务B
  - serviceB.bundle.chunkhash.js
- 服务C
  - serviceC.bundle.chunkhash.js

（其他运行时/主电源位于 /static/js 的根目录下）

另一个限制是组件是动态加载的

const Component = lazy(() => import(componentPath));
...
<Suspense fallback={..}>Component</suspense>

Run Code Online (Sandbox Code Playgroud)

“componentPath”是动态确定的（当用户单击图标时，它会打开给定的服务）。

这样做的原因是我想将每个包包含到运行后端的单独 Docker 映像中。然后，由于应用程序路由，每个 Docker 映像都可以访问：

static/js/serviceA/  ==> js served by Docker container running service A
static/js/serviceB/  ==> js served by Docker container running service B
static/js/serviceC/  ==> js served by Docker container running service …

Run Code Online (Sandbox Code Playgroud)

reactjs webpack-4 splitchunksplugin webpack-splitchunks

Prz*_*ski

lucky-day

7
推荐指数

1
解决办法

2144
查看次数

Webpack4:基于入口点的两个供应商库

所以,我一直在打猎,除非我的搜索技能最近变得更糟,否则我似乎找不到任何东西.但是,我正在寻找的是能够根据入口点生成两个供应商捆绑包.

例如,我有3个入口点:

编辑
上市
验证

当用户登录时,它将包含auth,public和editor包的变体.当用户注销时,它只会加载公共包.这两种情况都会加载供应商捆绑包,但是当我们注销时,我不需要加载编辑器和auth所需的模块,因此希望有一种方法可以将其拆分为供应商和vendor.auth或类似的东西.

我目前唯一的优化代码如下:

optimization: {
    concatenateModules: true,
    splitChunks       : {
        cacheGroups: {
            commons: {
                test     : /[\\/]node_modules[\\/]/,
                name     : 'vendors',
                minChunks: 2,
                chunks   : 'all'
            }
        }
    }
},

Run Code Online (Sandbox Code Playgroud)

这里的任何帮助将不胜感激!

谢谢

javascript optimization webpack-4

Lee*_*eeR

lucky-day

7
推荐指数

1
解决办法

102
查看次数

如何使用 MiniCssExtractPlugin 控制 CSS 的顺序？

{
        test: /\.module\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
          {
            loader: 'css-loader',
            options: {
              modules: { localIdentName: '[local]---[hash:base64:5]' }
            }
          },
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: './src/css/_variables.scss'
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        exclude: /\.module\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
          'css-loader',
          'sass-loader'
        ]
      },

...

plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    })    
  ]

Run Code Online (Sandbox Code Playgroud)

我正在创建一个 css 文件，其中包含一些 vanilla sass 样式和一些 css 模块样式。有没有办法控制这个，以便模块 css 出现在输出的 bundle.css 文件中的常规 css …

javascript css webpack webpack-4 mini-css-extract-plugin

kgr*_*ubb

2020 06-24

7
推荐指数

2
解决办法

6255
查看次数

多个模块上的 webpack IgnorePlugin()

根据 webpack 4.x文档，我们可以使用 IgnorePlugin() 方法忽略插件，但以下示例仅忽略一个模块（moment/locales）

new webpack.IgnorePlugin({
  resourceRegExp: /^\.\/locale$/,
  contextRegExp: /moment$/
});

Run Code Online (Sandbox Code Playgroud)

如果我想忽略另一个模块（例如react-tooltip/dist/index.es.js：），是否有任何方法可以通过传递带有resourceRegExp或contextRegExp的数组来实现另一个要忽略的模块？

我尝试过：

new webpack.IgnorePlugin(/^\.\/index\.es\.js$/, /react-tooltip\/dist$/),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

Run Code Online (Sandbox Code Playgroud)

但该文件似乎始终存在于捆绑包中

javascript webpack webpack-4

Duj*_*ard

2020 11-25

7
推荐指数

1
解决办法

9149
查看次数

webpack-cli 错误：编译规则集失败

我正在尝试重写配置不当的package.json，删除node_modules，删除〜/.cache，从头开始

包.json

{
  "name": "billing",
  "version": "0.1.0",
  "private": true,
  "description": "A Vue.js project using Babel",
  "author": "Alex Povolotsky <tarkhil@over.ru>",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "webpack",
    "lint": "vue-cli-service lint",
    "postmerge": "./script/post_merge_hook.sh"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "bootstrap": "^3.4.1",
    "jquery": "^3.5.1",
    "moment": "^2.29.1",
    "uiv": "^1.1.5",
    "vue": "^2.6.12",
    "vue-class-component": "^7.2.6",
    "vue-month-picker": "^1.4.0",
    "vue-property-decorator": "^9.1.2",
    "vue-quick-edit": "^1.3.0",
    "vue-router": "^3.4.9",
    "vuejs-auto-complete": "^0.9.0",
    "vuejs-datepicker": "^1.6.2",
    "vuescroll": "^4.17.2",
    "vuex": "^3.6.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "css-loader": "^5.0.1",
    "dotenv-webpack": "^6.0.0",
    "eslint": "^7.16.0",
    "eslint-plugin-node": …

Run Code Online (Sandbox Code Playgroud)

javascript vuejs2 webpack-4

Ale*_*sky

lucky-day

7
推荐指数

1
解决办法

1万
查看次数

Webpack 5 收到 Polyfill 错误？！？！我的 JavaScript React 项目在尝试编译 webpack.config.js 文件时收到 polyfill 错误

我正在学习 Udemy 上的一门基于 React 的课程（这里是 Brad Schiff 的 React for the Rest of Us 课程），我收到了一个与 webpack 相关的错误，导致它无法编译。

当我尝试从我正在学习的 Udemy 课程中编译 webpack 文件时，我收到以下错误...这是我在终端上收到的错误的图片：请在此处查看

以下是错误文本，但请查看链接以获取更多详细信息（作为屏幕截图）：

Module not found: Error: Can't resolve 'path' in '/Users/seanmodd/Development/2021/BradSchiff/Frontend/node_modules/webpack/lib/util'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs webpack webpack-dev-server webpack-4

Thi*_*yan

lucky-day

7
推荐指数

1
解决办法

2万
查看次数