标签: webpack-4

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

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

根据Webpack 4文档,如果我指定libraryTarget:'umd',它应该产生以下输出:

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports["MyLibrary"] = factory();
  else
    root["MyLibrary"] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

但是,我得到的是:

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd) …

如何在webpack配置中获取模式,例如,推送一些插件.

package.json

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

我在webpack 3中做了什么

package.json

"scripts": {
    "build": "cross-env NODE_ENV=development webpack",
    "prod": "cross-env NODE_ENV=production webpack"
  },

然后,我能够通过webpack获取环境 process.env.NODE_ENV

当然,我可以通过NODE_ENV,--mode但我更愿意避免重复.

我正在尝试使用延迟加载导入创建ssr react应用程序.一切正常,但它不能获取所有必需的块

我也想知道这是否与动态组件有关,它基于服务器响应

enter code here

编辑 - 它实际上呈现了所有必需的块,但是当客户端接管并再次渲染时,它会消除整个事情

因为它重新渲染所有它减慢了很多.

解析器发生在服务器端,当客户端接管它时,获取更多 server.js

 const history = createHistory({
    initialEntries: [urlPath],
  })
  // const history = createHistory()
  const store = configureStore(history, {
    location: {
        ...
    },

  })

  const context = {}
  const htmlRoot = (
    <Provider store={store}>
      <StaticRouter location={urlPath} context={context}>
        <AppRoot />
      </StaticRouter>
    </Provider>
  )

  // pre fetching data from api
  store
    .runSaga(rootSaga)
    .done.then(() => {

        const RTS = renderToString(htmlRoot) + printDrainHydrateMarks()
        const head = Helmet.renderStatic() 
        console.log(printDrainHydrateMarks())

        res.status(code).send(renderDom(RTS, port, host, …

我最近添加了 terser-webpack-plugin 来缩小我的create react app代码。但是在构建项目时，我得到了一个错误，如TypeError: Cannot read property 'javascript' of undefined. 以下是我的控制台中的一些日志。请让我知道任何解决方法或更改来修复它。

控制台日志：

D:\a>npm run build:qa
> a@1.0.0 build:qa D:\a
> cross-env webpack --env.ENVIRONMENT=qa --config ./webpack.config.js --mode production --progress --colors
D:\a\node_modules\terser-webpack-plugin\dist\index.js:400
      const hooks = compiler.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation);
                                     ^
TypeError: Cannot read property 'javascript' of undefined
    at D:\a\node_modules\terser-webpack-plugin\dist\index.js:400:38

我使用的 webpack 版本：

"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

我有以下示例配置使用带有Webpack 4的mini-css-extract-plugin:

entry: {
   a: ['./js/a.js', './scss/a.scss'],
   b: ['./js/b.js', './scss/b.scss']
},
module: {
    rules: [
       [...],
       {
        test: /\.(css|sass|scss)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [
                        require('autoprefixer')
                    ],
                    sourceMap: true
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
        ]
},
optimization: {
    splitChunks: {
        cacheGroups: {
            js: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 7,
            },
            css: {
                test: /\.(css|sass|scss)$/, …

我可能需要重新思考我们构建 React 组件的方式。我们正在使用允许使用 Typescript 的最新 react-scripts，并且默认情况下，isolatedModules它正在启用，这目前让我有点烦恼。

我们过去常常像这样构造一个组件：

Component
|_ Component.tsx
|_ index.ts
|_ types.ts

• Component.tsx 保存没有声明的实际组件

• index.ts 只是重新导出所有东西，这样我们就可以有一个单一的入口点，并且可以做类似的事情 import Component, { ComponentType } from '@/Component';

• types.ts 保存实际的类型定义并导出其中的大部分或全部。

到目前为止一切顺利，无需isolatedModules. 但是，我们也导出了一些类型定义，有效地重新导出了在Component/types.ts. 这将不起作用，因为 TypeScript 本身不会再转译代码。

如何在没有单独的导入语句的情况下重新导出它@/Component/types（无论如何这可能是更简单的方法）？

项目目录结构。

以下是webpack配置文件。

webpack.config.client.js

const path = require('path');
const webpack = require('webpack');
const CURRENT_WORKING_DIR = process.cwd();

const config = {
  name: 'browser',
  mode: 'development',
  // mode: 'production',
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(CURRENT_WORKING_DIR, 'client/main.js'),
  ],
  output: {
    path: path.join(CURRENT_WORKING_DIR, '/dist'),
    filename: 'bundle.js',
    publicPath: '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // To bundle image assets so that other JS code can also access
      // and load it other than the component …

似乎无法在webpack中找到任何调试选项或插件来显示究竟是什么进入了一个块.

我为什么需要这个？我注意到代码分割的字面意思使得一切都变得更大,然后将所有东西都放在一个文件中.这有点反直觉,因为我不相信webpack的bootstrap代码是那么重要; 我怀疑它可能是缩小/重复数据删除,但不知道哪些模块实际上被分块,很难做一些孤立的测试来确认.

我的构建过程使用gulp; 如果这有任何区别.

我正在寻找有关 webpack 中这两个选项之间区别的明确解释。我已阅读此处的说明，但区别尚不清楚。引用描述：

将 optimization.splitChunks.chunks 选项设置为“所有”初始块会受到它的影响（即使是那些不是动态导入的）。这样块甚至可以在入口点和按需加载之间共享。