标签: webpack-4

我的应用程序使用NODE_ENV来决定应该请求哪个api服务器.

NODE_ENV="production" => https://api.***/
NODE_ENV="staging" => https://api.staging-***/
NODE_ENV="development" => http://localhost:3000/

我想用mode ="production"构建staging bundle,但保持NODE_ENV ="staging".

我尝试使用下面的配置构建,但bundle.js变为NODE_ENV ="production".

{
   mode: "production",
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
         'NODE_ENV': JSON.stringify("staging")
       }
     })
   ]
 }

我试图将scss编译成一个单独的css文件而没有运气.因为它现在是css与所有js代码一起进入bundle.js.我怎样才能将我的CSS分成自己的文件？

这是我的配置看起来的样子.

var path = require("path");

module.exports = {
entry: "./js/main.js",
output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist"
},
watch:true,
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: { presets: ["es2015"] }
            }
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "sass-loader"
                }
            ]
        }
    ]
}

}

我正在尝试迁移到Webpack 4,但这是一个真正的痛苦.经过几天的工作将Webpack 3插件移动到Webpack 4本机的东西,我得到了js很好的假设,但是当我去我的网站时,我在控制台上收到了这条消息:

Uncaught TypeError: (intermediate value)(intermediate value).push is not a function

上:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["Index"],{

这是我的Webpack output设置:

output: {
    filename,
    path: path.resolve(__dirname, 'public', 'build', 'js'),
    jsonpFunction: 'webpackJsonp', // TODO gotta figure that out
},

我究竟做错了什么？

我开发了 React 应用程序，之前我在 webpack v3 上构建了相同的应用程序，现在我升级到 v4。
在 v3 dev-server上它工作得很好，但在 v4 上它需要花费大量时间来构建，并且每次它都会再次构建整个项目（可能就是这个原因）
我的webpack.dev.js

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'inline-source-map',  
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                loader: "babel-loader"
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize:false,
                            importLoaders: 1,
                        } …

我在生产中遇到错误.看起来它与uglisify Webpack插件有关我找不到解决方案来解决它.

Webpack配置:

    const UglifyJSPlugin = require("uglifyjs-webpack-plugin");

 module.exports = {
   mode: "production",
   entry: "./index.tsx",
  resolve: {
      extensions: [".js", ".tsx"]
   },
   module: {
     rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
           options: {
        transpileOnly: true
          }
         }
       }
     ]
  },
   optimization: {
       minimizer: [new UglifyJSPlugin()]
  }
};

index.tsx

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';

    const TestComponent = () => {
        React.useEffect(() => {});
        return null;
    };

    ReactDOM.render(<TestComponent />, document.getElementById('app'));

版本:

"react": "^16.7.0-alpha.0",
"react-dom": "^16.7.0-alpha.0", …

故事

我正在开发 AWS Lambda 函数并使用webpack.

我已经阅读了一些文章，似乎process.env在编译期间变量会被自动替换。虽然很酷，但我想禁止这种行为。

为什么？

因为我使用 AWS Lambda 仪表板传递环境变量。

网络包配置

const nodeExternals = require('webpack-node-externals')
const webpack = require('webpack')
const path = require('path')

module.exports = {
  target: 'node',
  entry: path.resolve(__dirname, 'index.ts'),
  externals: [nodeExternals()],
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: [{
        loader: 'ts-loader',
        options: {
          experimentalWatchApi: true,
        },
      }],
    }]
  },
  plugins: [],
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'index.js',
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, 'dist')
  }
} …

当我尝试导入SVG图像时，显示以下错误。我必须使用哪个加载器来导入SVG图像？

./static/Rolling-1s-200px.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107 194.6)"/><ellipse fill="#eee3bb" rx="1" ry="1" transform="matrix(-56.38179 17.684 -24.48514 -78.06584 205 110.1)"/><ellipse fill="#fff4bd" rx="1" ry="1" transform="matrix(35.40604 -5.49219 14.85017 95.73337 16.4 123.6)"/><ellipse fill="#79c7db" cx="21" cy="39" rx="65" ry="65"/><ellipse fill="#0c1320" cx="117" cy="38" rx="34" ry="47"/><ellipse fill="#5cb0cd" rx="1" ry="1" transform="matrix(-39.46201 77.24476 …

我想通过以下方式使用 Webpack 分割我的块：

每当我导入 NPM 包时，例如

import styled from "styled-components";

我想要一个像这样的块：

styled-components.[contenthash:5].js  // INCLUDING ITS DEPENDENCIES

这是我正在使用的配置：

webpack.config.js

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
}

现在我将每个依赖项styled-components作为不同的块。例如：下面的3个包都是需要的styled-components

理想情况下，我还希望有一个commons或shared块以避免多个模块需要可能的模块。

有人知道该怎么做吗？

我用来react-pdf通过 CRA 在 React 中渲染 PDF，然后像这样导入它：

import { Document, Page } from "react-pdf/dist/esm/entry.webpack";

现在，我尝试使用以下 webpack 配置来实现 SSR：

// webpack.server.conf

const path = require("path");
const webpackNodeExternals = require("webpack-node-externals");

module.exports = {
  target: "node",
  entry: "./server/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build-server"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    modules: [path.resolve(__dirname, "src"), "node_modules"],
  },
  externals: [webpackNodeExternals()], // excludes node modules in Webpack
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: {
          configFile: "tsconfig.server.json",
        },
      },
      // we …

我尝试将Webpack和babel分别升级到4、7，但是无法正常工作。另外，官方文档对升级没有太大帮助

我正在关注问题

编译器错误：找不到模块'@ babel / core'@多主体时出错

我正在使用的依赖项：

"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"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": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

如果需要更多详细信息，请告诉我。