I use webpack + typescript + react.
webpack.config.js is:
var webpack = require('webpack');
var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
var deps = [
'react/react.js',
'react-dom/react-dom.js',
];
var config = {
devtool: 'source-map',
context: __dirname + '/Scripts/ts',
entry: {
server: "./server.js",
client: "./client.ts"
},
output: {
path: path.resolve(__dirname, "Scripts/public/"),
filename: '[name].bundle.js'
},
resolve: {
alias: {},
modulesDirectories: ["node_modules"],
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
noParse: [],
// Use the expose loader to expose the minified React JS
// distribution. For example react-router requires this
loaders: [ {
test: /\.ts(x?)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader?presets[]=es2015&presets[]=react!ts-loader'
},
{
test: path.resolve(node_modules_dir, deps[0]),
loader: "expose?React"
},
]
},
watch: true
};
deps.forEach(function (dep) {
var depPath = path.resolve(node_modules_dir, dep);
config.resolve.alias[dep.split(path.sep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = config;
My problem is build speed. An initial process takes about 25s and incremental - 5-6 s. The result of:
webpack --profile --display-modules
is:
ts-loader: Using typescript#1.8.0-dev.20160104 and C:\Users\rylkov.i\Documents\Visual Studio 2013\Projects\react_test_app\react_test_app\tsconfig.json
Hash: d6d85b30dfc16f19f4a6
Version: webpack 1.12.9
Time: 25547ms
Asset Size Chunks Chunk Names
client.bundle.js 1.14 MB 0 [emitted] client
server.bundle.js 1.14 MB 1 [emitted] server
client.bundle.js.map 1.31 MB 0 [emitted] client
server.bundle.js.map 1.31 MB 1 [emitted] server
[0] ./client.ts 80 bytes {0} [built]
factory:38ms building:21905ms dependencies:1ms = 21944ms
[0] ./server.js 70 bytes {1} [built]
factory:14ms building:19ms = 33ms
[1] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/expose-loader?Components!./components/index.js 179 bytes {0} {1} [built]
[0] 33ms -> factory:2078ms building:8ms = 2119ms
[2] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/index.js 210 bytes {0} {1} [built]
[0] 33ms -> [1] 2086ms -> factory:19832ms building:4ms = 21955ms
[3] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/main.tsx 4.78 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:26ms building:331ms dependencies:1ms = 22313ms
[4] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 172 bytes {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> factory:315ms building:0ms = 22627ms
[5] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 641 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> [4] 315ms -> factory:1ms building:86ms = 22714ms
[6] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/todoItem.tsx 2.81 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:576ms dependencies:70ms = 22629ms
[7] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectControl.tsx 3.44 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:27ms building:428ms dependencies:218ms = 22628ms
[8] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react-dom/react-dom.js 1.17 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:215ms building:4ms = 22629ms
[9] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectItem.tsx 2.63 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:502ms dependencies:144ms = 22629ms
[10] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/imports-loader?$=jquery!C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ui-select.js 99.6 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:150ms building:145ms = 22705ms
[11] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/jquery/dist/jquery.js 348 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> [10] 295ms -> factory:10ms building:211ms = 22926ms
I think that this is extremely slow. react.js and react-dom.js are already compiled js files without extra require. My components are simply examples.
One more problem with webpack is:
watch:true
attribute of config. I can't understand why is works not always. But maybe this is because slow build process. Thanks!
One thing, specifically in development, make sure to set the mode:
module.exports = {
mode: "development"
// Other options...
}
If not set at all (looks like it's not in the shared webpack config), it will default to "production". This is ideal since you'll want your code ran in production mode for deploying because it minifies, does dead code elimination, some packages (eg: React) ship different builds depending on the environment, among other things.
However, if you're in development, running in production mode can add some build time cost because doing this minification, dead code elimination, etc. add to the overall build time. This is unavoidable for the actual production built so this won't help that build time, but assuming you're building significantly more in development it should save some time.
Additionally, consider changing the devtool option to a cheaper option such as cheap-module-eval-source-map or one of the other options in the docs: https://webpack.js.org/configuration/devtool/. The docs explain the differences and build time costs. The current option source-map is one of the slowest options.
module.exports = {
devtool: "eval-cheap-module-source-map"
// Other options...
}
You could try:
devtool: 'eval',
It will produce a considerably larger file but in half the time. Not recomended for production.
Removing dev-tool: source-maps should speed up the compilation time. Also it's important to note that your files are on the larger side as the output is over 1mb.
You could also add the cacheDirectory: true flag to babel-loader. I found that this greatly sped up my builds at my company. Reference - https://webpack.js.org/loaders/babel-loader/#options
Also I personally use the --watch flag for when I want webpack to run in watch mode. This lets me have more control over when I want it to actually run.
Related
I am practicing on the webpack project. I got the error while I am importing the img file. I am new for webpack. I have installed the "image-webpack-loader" but still got the error.
Here is the webpack.config.js code
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
},
{
loader: ExtractTextPlugin.extract({
loader: 'css-loader'
}),
test: /\.css$/
},
{
test: /\.(jpe?g | png | gif |svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 40000
}
},
'image-webpack-loader'
]
}
]
},
plugins: [
new ExtractTextPlugin('style.css')
]
};
module.exports = config;
And Here is the image_viewer.js file
import '../assets/big.jpg';
import '../assets/small.jpg';
import '../styles/image_viewer.css';
const image = document.createElement('img');
image.src = 'http://lorempixel.com/400/400';
document.body.appendChild(image);
I can't find the solution for this issue. You can see the issue. The style.css and build.js is properly bundled but when I work for image it does not work got some error which I have mentioned below.
> webpack
keywords if/then/else require v5 option
Hash: 5ba37842c394273b5247
Version: webpack 2.2.0-rc.0
Time: 2330ms
Asset Size Chunks Chunk Names
bundle.js 4.38 kB 0 [emitted] main
style.css 41 bytes 0 [emitted] main
[0] ./src/image_viewer.js 452 bytes {0} [built]
[1] ./src/sum.js 177 bytes {0} [built]
[2] ./assets/big.jpg 235 bytes {0} [built] [failed] [1 error]
[3] ./assets/small.jpg 237 bytes {0} [built] [failed] [1 error]
[4] ./styles/image_viewer.css 41 bytes {0} [built]
[5] ./src/index.js 303 bytes {0} [built]
+ 1 hidden modules
ERROR in ./assets/small.jpg
Module parse failed: I:\Javascript & Angular & Node\webpack\assets\small.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/image_viewer.js 7:13-43
# ./src/index.js
ERROR in ./assets/big.jpg
Module parse failed: I:\Javascript & Angular & Node\webpack\assets\big.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./src/image_viewer.js 3:11-39
# ./src/index.js
Child extract-text-webpack-plugin:
[1] ./~/css-loader!./styles/image_viewer.css 204 bytes {0} [built]
+ 1 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! jsmodule#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the jsmodule#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Engraved\AppData\Roaming\npm-cache\_logs\2018-05-27T10_29_34_980Z-debug.log
My webpack version is "webpack": "^2.2.0-rc.0".
I have got the answer for this error. I have researched more and found the issue. It is the little issue by which I had mad.
The issue was that to add space to images extension which I have mentioned in the code. See below the line
test: /\.(jpe?g | png | gif |svg)$/
This line got mad me. You can not give the space between them.
test: /\.(jpe?g|png|gif|svg)$/ - This is the correct.
HMR Not receive update signal from WDS
Operating System: MacOS 10.12.6
Node Version: 8.5.0
NPM Version: 5.3.0
webpack Version: 3.6.0
webpack-dev-server Version: 2.8.2
Code
// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
devServer: {
contentBase: './dist',
hot: true,
inline: true
},
entry: {
main: [
'./test/main.js'
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '__[name].js'
},
module: {
rules: [
{
test: /\.js?$/,
use: [
{
loader: 'babel-loader'
}
],
exclude: /\/(node_modules|bower_components)/
}
]
},
devtool: 'cheap-module-source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
new webpack.HotModuleReplacementPlugin()
]
}
// ./test/main.js
console.log('Test')
if (module.hot) {
module.hot.accept()
}
Terminal output
webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 07cd69bf3e44cc2f62fe
Version: webpack 3.6.0
Time: 990ms
Asset Size Chunks Chunk Names
__main.js 357 kB 0 [emitted] [big] main
__main.js.map 425 kB 0 [emitted] main
index.html 193 bytes [emitted]
[36] ./node_modules/webpack/hot/log.js 1.04 kB {0} [built]
[37] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./test/main.js 52 bytes {0} [built]
[38] (webpack)-dev-server/client?http://localhost:8080 7.27 kB {0} [built]
[39] (webpack)/node_modules/url/url.js 23.3 kB {0} [built]
[45] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
[47] (webpack)-dev-server/node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
[48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
[80] (webpack)-dev-server/client/overlay.js 3.71 kB {0} [built]
[81] (webpack)-dev-server/node_modules/ansi-html/index.js 4.26 kB {0} [built]
[85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[87] (webpack)/hot/emitter.js 77 bytes {0} [built]
[88] ./node_modules/webpack/hot/dev-server.js 1.61 kB {0} [built]
[89] ./node_modules/webpack/hot/log-apply-result.js 1.31 kB {0} [built]
[90] ./node_modules/webpack/hot/emitter.js 77 bytes {0} [built]
[91] ./test/main.js 62 bytes {0} [built]
+ 77 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
[1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.
Generated html on http://localhost:8080/ by HtmlWebpackPlugin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hot Module Replacement</title>
</head>
<body>
<script type="text/javascript" src="__main.js"></script></body>
</html>
Chrome Console
log.js:23 [HMR] Waiting for update signal from WDS...
main.js:1 >>>
client:77 [WDS] Hot Module Replacement enabled.
Then change main.js — console.log('>>>>') to console.log('Changed')
Chrome Console after changed main.js
log.js:23 [HMR] Waiting for update signal from WDS...
main.js:1 >>>
client:77 [WDS] Hot Module Replacement enabled.
client:80 [WDS] App updated. Recompiling...
client:213 [WDS] App hot update...
I try your config on Ubuntu via Docker:
Operating System: Ubuntu 17.04 Zesty
Docker: 17.06.2-ce, build cec0b72
Node image: 8.5.0
My Dockerfile:
FROM node:latest
### Configuration
RUN mkdir -p /code
COPY ./webpack.config.js /code
### Requirements
RUN npm install -g webpack-dev-server#2.8.2
RUN npm install babel-loader babel-core babel-preset-env
RUN npm install html-webpack-plugin
RUN npm install webpack#3.6.0
### Application
WORKDIR /code
EXPOSE 8080
All works fine:
I think your problem in MacOS environment.
I hope my answer help you find problem.
I have a React project which was built using Webpack. The weird issue is when I run the React app in my original folder it builds and runs without any error. However when I copy all the files in the folder, paste it in a new folder and then try to build the same project it fails. I have tried changing the folder name, changing the config files to reflect the new folder name, however it always fails in app.js and points to an error in render method. Few points to note:
I havent hardcoded any paths
I have cleaned the node modules and rebuilt the project from groundup including cleaning npm cache.
The same project works in my original folder without any errors.
The error I get is as follows:
Version: webpack 2.2.1
Time: 1520ms
Asset Size Chunks Chunk Names
app.js 219 kB 0 [emitted] main
index.html 636 bytes [emitted]
chunk {0} app.js (main) 208 kB [entry] [rendered]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[32] ./src/app.js 783 bytes {0} [built] [failed] [1 error]
[33] (webpack)-dev-server/client?http://0.0.0.0:8080 4.16 kB {0}
[built]
[34] ./~/ansi-regex/index.js 135 bytes {0} [built]
[35] ./~/punycode/punycode.js 14.7 kB {0} [built]
[36] ./~/querystring-es3/decode.js 2.51 kB {0} [built]
[38] ./~/querystring-es3/index.js 127 bytes {0} [built]
[40] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
[47] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
[49] ./~/sockjs-client/lib/transport-list.js 613 bytes {0}
[built]
[66] ./~/strip-ansi/index.js 161 bytes {0} [built]
[68] ./~/url/url.js 23.3 kB {0} [built]
[69] ./~/url/util.js 314 bytes {0} [built]
[70] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
[72] multi (webpack)-dev-server/client?http://0.0.0.0:8080
./src/app.js
40 bytes {0} [built]
+ 58 hidden modules
ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (39:2)
37 | // });
38 | ReactDOM.render(
> 39 | <div>Hello</div>,
| ^
40 | document.getElementById('content'),
41 | );
42 |
# multi (webpack)-dev-server/client?http://0.0.0.0:8080
./src/app.js
Child html-webpack-plugin for "index.html":
chunk {0} index.html 542 kB [entry] [rendered]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 1.32
kB
{0} [built]
webpack: Failed to compile.
The above error doesn't happen when running in my original folder. What is the issue here?
Your .babelrc file is in the root of your project directory, and thats where webpack looks for it to use your loaders and presets. You can workaround by using the following config
{
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')], // <- Whatever preset you wish
cacheDirectory: true,
}
}
],
test: /\.js$/,
exclude: /node_modules/
},
Given the following gulp task.
I get error output
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
gulp.task("admin:js", function (done) {
module.exports = {
context: "wwwroot/js/admin",
entry: ["app.ts", "zippy.ts"],
output: {
filename: "admin.js"
},
devtool: "source-map",
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
webpack(module.exports).run(onBuild(done));
});
with directory structure
wwwroot\js\admin\app.ts
wwwroot\js\admin\zippy.ts
I am getting this error:
Version: webpack 2.2.1
Time: 31ms
Asset Size Chunks Chunk Names
admin.js 2.87 kB 0 [emitted] main
admin.js.map 2.61 kB 0 [emitted] main
chunk {0} admin.js, admin.js.map (main) 40 bytes [entry] [rendered]
[0] multi app.ts zippy.ts 40 bytes {0} [built]
ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
# multi app.ts zippy.ts
ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'zippy.ts' in 'wwwroot/js/admin'
# multi app.ts zippy.ts
It's a path issue, as if I execute webpack from the command line, in the wwwroot\js\admin directory, without the context path, the files get bundled correctly and it all works.
When I use the API script, and execute from the project root (relative to .\wwwroot\js\admin) I get the error output.
webpack does not support the use of relative paths in the context configuration entry.
changing context as follows:
module.exports = {
context: __dirname + "/wwwroot/js/admin",
...
corrected the output.
Version: webpack 2.2.1
Time: 2337ms
Asset Size Chunks Chunk Names
admin.js 1.24 MB 0 [emitted] [big] main
admin.js.map 1.48 MB 0 [emitted] main
chunk {0} admin.js, admin.js.map (main) 1.24 MB [entry] [rendered]
[0] ./~/angular/index.js 48 bytes {0} [built]
[1] ./wwwroot/js/admin/app.ts 408 bytes {0} [built]
[2] ./wwwroot/js/admin/zippy.ts 1.16 kB {0} [built]
[3] ./~/angular/angular.js 1.24 MB {0} [built]
[4] multi ./app.ts ./zippy.ts 40 bytes {0} [built]
[10:30:37] Finished 'admin:js' after 2.43 s
I have an application with multi entry points. But all entry points use same 3rd party libraries. I want to have those 3rd party libraries alone in one separate file. When I followed the steps in the documentation, it moves my application code also into the 3rd vendor chunk file.
entry: {
index: __dirname + "/entry1.js",
app: __dirname + "/entry2.js",
vendor: ["axios", "react-router", "react", "react-dom"]
},
output: {
path: __dirname + "/build",
filename: "[name]-[hash].js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "[name]-[hash].js")
]
Below is the webpack output
Hash: 78d489a6e4aec65292b2
Version: webpack 1.12.14
Time: 8161ms
Asset Size Chunks Chunk Names
vendor-78d489a6e4aec65292b2.js 925 kB 0 [emitted] vendor
index-78d489a6e4aec65292b2.js 1.87 kB 1 [emitted] index
app-78d489a6e4aec65292b2.js 1.41 kB 2 [emitted] app
index-78d489a6e4aec65292b2.css 83 bytes 1 [emitted] index
vendor-78d489a6e4aec65292b2.js.map 1.05 MB 0 [emitted] vendor
index-78d489a6e4aec65292b2.js.map 2.3 kB 1 [emitted] index
index-78d489a6e4aec65292b2.css.map 107 bytes 1 [emitted] index
app-78d489a6e4aec65292b2.js.map 1.76 kB 2 [emitted] app
index.html 370 bytes [emitted]
app.html 311 bytes [emitted]
[0] multi vendor 64 bytes {0} [built]
+ 258 hidden modules
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
Child html-webpack-plugin for "app.html":
+ 3 hidden modules
Child extract-text-webpack-plugin:
+ 2 hidden modules
Opened this issue in Github 2191
Setting the minChunks to Infinity seems to fix it. Below is the code. Also you can get a working example here.
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity
})