Я разработал компонент реагирования, и для демонстрации я создал приложение реагирования, чтобы можно было протестировать модуль, который я разрабатываю.Итак, у меня есть отдельный модуль, который является реагирующим модулем, и я использовал 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 config
const path = 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'
}
};
Используя эту конфигурацию, я npm связал модуль с моим проектом, который имеет следующий пакет 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 config
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/
В чем причина такого предупреждения?Могу ли я что-нибудь сделать, чтобы улучшить время сборки и избежать предупреждений, отображаемых в консоли .?