Webpack 4附带以下声明:

webpack.optimize.UglifyJsPlugin已被删除,请改用config.optimization.minimize.

很公平,但我找不到任何有关配置在底层运行的UglifyJsPlugin实例的信息,例如更改缓存目录.可以这样做吗？

在webpack 3配置中,我将使用下面的代码创建单独的vendor.js块:

entry: {
    client: ['./client.js'],
    vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
},

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

plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
    }),
],

通过所有更改,我不知道如何使用Webpack 4.我知道这CommonChunksPlugin已被删除,因此有不同的方法来实现它.我也阅读了本教程,但我仍然不确定是否提取运行时块并正确定义output属性.

编辑: 不幸的是,我遇到了最流行的答案问题.看看我的答案.

我需要帮助将以下代码从webpack 3迁移到4.

new webpack.optimize.CommonsChunkPlugin({
    minChunks: module => module.context && module.context.indexOf("node_modules") !== -1,
    name: "vendor",
    chunks: ["main"]
})

我有两个条目文件,只希望第一个的依赖项包含在供应商块中.第二个条目的依赖关系应该都保留在自己的bundle中.

我正在使用 webpack-merge 将两个 webpack.config 文件组合在一起，但我不断收到错误“TypeError：merge is not a function when I run the command”webpack --config ./config/webpack.config.prod.js ”

有没有其他人遇到过这个问题？

webpack.config.prod.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const TerserPlugin = require('terser-webpack-plugin');
const commonConfig= require('./webpack.config.common');
const merge = require('webpack-merge');

module.exports = merge(commonConfig, {

    //config code
 
})

我完全遵循这里给出的教程.但令我惊讶的是,这些文档似乎已经过时了.例如

npx webpack src/index.js dist/bundle.js 失败了:

CLI移动到一个单独的包中:webpack-cli.除了webpack本身之外,请安装'webpack-cli'以使用CLI. - >使用npm时:npm install webpack-cli -D - >使用纱线时:纱线添加webpack-cli -D

如果我安装webpack-cli并再试一次,我会看到以下错误:

哈希:af9bc06fd641eb0ffd1e版本:webpack 4.0.0时间:3865ms建于:2018-2-26 05:10:45 1资产入口点main = main.js 1 (webpack)/buildin/module.js 519字节{0} [已构建] 2 (webpack)/buildin/global.js 509字节{0} [built] [3] ./src/index.js 212字节{0} [built] [4] multi ./src/index.js dist/bundle.js 40个字节{0} [built] + 1个隐藏模块

配置中的警告尚未设置"模式"选项.将"mode"选项设置为"development"或"production"以启用此环境的默认值.

多个./src/index.js中的错误dist/bundle.js找不到模块:错误:无法解析'/ var/app/webpack_demo'中的'dist/bundle.js'@ multi ./src/index.js DIST/bundle.js

我希望我没有做一些疯狂的事情,鉴于webpack的流行,文档应该反映实际行为.如果我做错了,请告诉我.

编辑

有关升级到webpack 4的详细说明,可能会有所帮助

我正在开展一个大型项目并试图登陆webpack 3 - > 4更新.这个应用程序有大约1,000个入口点,其中大约10个被认为是"全局"或"核心",并保证在每个页面上.这些核心包包含供应商和非供应商代码的混合.我需要配置webpack来构建所有这些资产,以便任何这些捆绑包中出现的任何块都不会出现在任何其他捆绑包中,无论块的大小如何,而无需创建需要添加到页面的新资产.

使用webpack 3,我们一直在使用CommonsChunkPlugin来实现这一目标.这是一个简单的例子:

new webpack.optimize.CommonsChunkPlugin({
  name: 'a-global-bundle',
  minChunks: Infinity,
}),

现在有了webpack 4并删除了CommonsChunkPlugin,我不清楚如何完成这种优化.

我希望能够为webpack提供一个入口点列表,任何出现在其中的任何块都不会出现在任何其他捆绑包中,但我不知道如何做到这一点.我已经阅读了一些即将发布的文档,splitChunks但我无法拼凑出一个解决方案.

我已经设置了一个小型仓库作为修补的起点:https://github.com/lencioni/webpack-splitchunks-playground

我正在尝试的一个有趣的方向是cacheGroups为每个入口点配置一个组,并使用执行test此检查的功能实现该选项.但是,文档在这方面相当稀疏,所以我不确定编写此测试函数的正确方法是什么,或者即使这样也可以.

我正在尝试利用SplitChunksPlugin为MPA中的每个页面/模板生成单独的包.当我使用HtmlWebpackPlugin时,我会为每个页面获取一个html文件,其中脚本标记指向正确的包.那样太好了!但是,我遇到的问题是我的供应商文件.我希望单独的html文件只指向他们需要的供应商包.当SplitChunksPlugin创建多个供应商捆绑包时,我无法将每个单独的html文件指向正确的供应商捆绑包.制作的包包括:

home.bundle.js
product.bundle.js
cart.bundle.js
vendors~cart~home~product.bundle.js
vendors~cart~product.bundle.js

所以基本上主页模板应该引用home.bundle.js,vendor~cart~home~product.bundle.js,而不是第二个供应商包.只有购物车和产品模板才能引用两个供应商包.我正在利用HtmlWebpackPlugin的chunks选项,但无法获取它来提取正确的供应商包,除非我明确引用它的名称,如下所示:

chunks: ['vendors~cart~home~product.bundle','home']

但是这有点挫败了动态呈现脚本标签的目的.我已经尝试创建供应商入口点,但这会将我的所有供应商整合在一起.有一些我缺少的简单配置吗？

我的webpack.config.js:

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

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        home: './src/js/page-types/home.js',
        product: './src/js/page-types/product.js',
        cart: './src/js/page-types/cart.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/js')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new Visualizer(),
        new HtmlWebpackPlugin({
            filename: 'home.html',
            chunks: ['vendors','home']
        }),
        new HtmlWebpackPlugin({
            filename: 'product.html', …

我第一次尝试运行webpack-4

webpack ./src/js/app.js ./dist/app.bundle.js

它显示警告/错误:

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/

ERROR in multi ./src/js/app.js ./dist/app.bundle.js
Module not found: Error: Can't resolve './dist/app.bundle.js' in 'D:\wamp64\www\webpack-4'
 @ multi ./src/js/app.js ./dist/app.bundle.js

然后我试着改变模式

webpack --mode development

表明 :

ERROR in Entry module …

我安装了最新版本的webpack:

"webpack": "^4.0.0",
"webpack-cli": "^2.0.9"

然而,当我webpack在终端中运行时,我得到以下内容:

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

我正在使用 mini-css-extract-plugin 将 css 从我们的包中提取到一个文件中。我需要将该文件放在文件系统中的不同位置。

如何配置 mini-css-extract-plugin 以将 css 文件放到与 js 包不同的路径。