javascript - 使用本地子模块构建 webpack 项目

Question

我开发了一个 react 组件，为了演示目的，我创建了一个 react 应用程序，以便我可以测试我正在开发的模块。所以我有一个单独的模块，它是一个 react 模块，我使用 npm link 将该模块链接到我的项目。以下是模块的包json。

封装json

{
  "name": "sample-module",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack --watch"
  },
  "author": "Imesh Chandrasiri",
  "license": "Apache-2.0",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "file-loader": "^2.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.2",
    "url-loader": "^1.1.1"
  },
  "peerDependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }
}

webpack 配置

const 路径 = require('路径');const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [{
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react'],
                }
            }
        },{
            test: /\.(css|less)$/,
            use: ["style-loader", "css-loader"]
        },{
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve("url-loader"),
            options: {
                limit: 10000,
                name: "static/media/[name].[hash:8].[ext]",
            },
        },{
            test: /\.(png|jpg|svg|cur|gif|eot|svg|ttf|woff|woff2)$/,
            use: ['url-loader'],
        }]
    },
    plugins: [
        new ExtractTextPlugin({filename: 'style.css'})
    ],
    externals: {
        'react': 'commonjs react'
    }
};

使用此配置，我已将模块链接到我的项目，该项目具有以下包 json 和 webpack 配置。

封装json

{
  "name": "sample-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "Imesh Chandrasiri",
  "license": "Apache-2.0",
  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "react-hot-loader": "^4.3.4",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "css-loader": "^1.0.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "style-loader": "^0.22.1"
  }
}

webpack 配置

const webpack = require('webpack');
var path = require('path');
module.exports = {
    entry: './src/index.js',
    devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        },{
            test: /\.(css|less)$/,
            use: ["style-loader", "css-loader"]
        }
      ]
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './dist',
      hot: true
    }
  };

问题

所以这个设置工作正常，当我更改模块中的文件时，它会重新编译项目中的文件并反射(reflect)更改。问题是，该项目在控制台中向我发出警告，并且重新编译时间如此之长。

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/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  index.js (16.3 MiB)
  0.5721d2929929bd15755f.hot-update.js (15 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (31.3 MiB)
      index.js
      0.5721d2929929bd15755f.hot-update.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

出现这样的警告的原因是什么？我可以做些什么来缩短构建时间并避免控制台中显示的警告吗？

Answer 1

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/

要消除此警告，您需要显式设置 mode 选项。

module.exports = {
    mode: 'development', // <- Add this line
    entry: './src/index.js',

    // The rest of your code

<小时/>

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  index.js (16.3 MiB)
  0.5721d2929929bd15755f.hot-update.js (15 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (31.3 MiB)
      index.js
      0.5721d2929929bd15755f.hot-update.js

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

这是因为最终的输出文件非常大...16.3 MiB、15 MiB 和 31.3 MiB。我的天啊!!!想象一下，您网站的每个访问者都必须下载 31.3 MiB 才能查看您的网站。与世界其他国家相比，可能是你们国家的互联网基础设施太好了。在我的国家/地区，下载您的网站需要几分钟的时间。也许浏览器缓存机制可以为您节省一点，但不会太多。

我无法为您提供保证有效的解决方案，因为它很大程度上取决于您的项目设置，并且它太大而无法在此处提供答案。但我可以给你一个使用代码分割的建议以及 webpack 文档的链接:https://webpack.js.org/guides/code-splitting/ 。警告中也提到了这一点，因此您可以相信它。

基本上，这个想法是将代码拆分为多个 js 文件。如果它只需要一个大小为 200 Kib 的 js 文件来渲染主页，我们将只加载它。其余的可以等待并按需加载。

我建议您尝试按照文档设置 webpack code-spliting 并返回此处并提出其他问题(如果有)。