【发布时间】：2019-02-01 14:03:16
【问题描述】：
我正在开发一个 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 path = require('path'); 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
}
};
问题
所以这个设置工作正常，当我更改模块中的文件时，它会重新编译项目中的文件并反映更改。问题是，该项目在控制台中给了我警告，并且重新编译时间如此之长。
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/
出现这种警告的原因是什么？我可以做些什么来缩短构建时间并避免控制台中显示的警告。
【问题讨论】：
标签： javascript node.js reactjs webpack