I am working on a project where I am using several sass files and I am calling them into one single file, the problem is that when I try to apply the styles they don't show up.
sass files. Now this is how i configured my webpack.config.js file
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "images/[hash][ext][query]",
},
devtool: "inline-source-map",
devServer: {
contentBase: "./dist",
},
module: {
rules: [
{
test: /\.(s[ac]|c)ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
generator: {
filename: "static/[hash][ext][query]",
},
},
],
},
};
and this is the error i get
> restaurant#1.0.0 start /home/cvilla714/javascript/restaurant-page
> webpack serve --open
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./dist
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: asset main.js 943 KiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 345 KiB 26 modules
modules by path ./sass/*.scss 2.4 KiB
./sass/tabs.scss 366 bytes [built] [code generated]
./sass/main.scss 366 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/tabs.scss 1.64 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/main.scss 39 bytes [built] [code generated] [1 error]
modules by path ./src/*.js 4.48 KiB
./src/index.js 201 bytes [built] [code generated]
./src/tabs.js 2.42 KiB [built] [code generated]
./src/nav.js 1.86 KiB [built] [code generated]
ERROR in ./sass/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
7 │ $font-dancingScript: "Dancing Script", cursive;
│ ^
╵
sass/_layout.scss 7:47 #import
sass/main.scss 2:9 root stylesheet
# ./sass/main.scss 2:12-127 9:17-24 13:15-29
# ./src/nav.js 4:0-27
# ./src/index.js 3:0-31
webpack 5.18.0 compiled with 1 error in 2816 ms
ℹ ｢wdm｣: Failed to compile.
this is how I am importing the style to the project
import "../sass/main.scss";
I can't apply my styles to the project, I have been trying all day to fix this issue with no success, I would really appreciate if someone can please point me in the right direction.
Your Webpack config is correct. Error in your
$font-dancingScript: "Dancing Script", cursive;
adding ' must solve your problem;
$font-dancingScript: ' "Dancing Script", cursive ';
Config:
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader","css-loader","sass-loader"],
}
Related
I'm trying to create a boilerplate with Webpack 5 and React to understand the details all of the elements. And it seems like everything works properly except the updating bundle.js in memory.
When I run the 'webpack serve' command the server starts, then I modify script, page is reloaded but there are no changes.
I have next statement in config files
package.json:
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"#babel/preset-react": "^7.16.0",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"dotenv-webpack": "^7.0.3",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.64.1",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0"
}
}
webpack.config.js:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const DotenvWebpackPlugin = require('dotenv-webpack');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js',
},
devServer: {
static: {
directory: path.join(__dirname, 'src'),
},
port: 8080,
open: true,
hot: true,
liveReload: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /nodeModules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new DotenvWebpackPlugin({
path: '.env'
})
],
stats: {
errorDetails: true,
},
}
Logs:
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.106:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'D:\Projects\boilerplates\react-app\src' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
[BABEL] Note: The code generator has deoptimised the styling of D:\Projects\boilerplates\react-app\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.
asset index.bundle.js 4.06 MiB [emitted] (name: main)
asset index.html 287 bytes [emitted]
runtime modules 27.1 KiB 13 modules
modules by path ./node_modules/ 1.06 MiB 45 modules
modules by path ./src/ 3.29 KiB
modules by path ./src/*.js 477 bytes
./src/index.js 200 bytes [built] [code generated]
./src/App.js 277 bytes [built] [code generated]
modules by path ./src/*.css 2.83 KiB
./src/app.css 2.24 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/app.css 601 bytes [built] [code generated]
webpack 5.64.1 compiled successfully in 3107 ms
assets by path *.js 4.06 MiB
asset index.bundle.js 4.06 MiB [emitted] (name: main)
asset main.c161a0c51f50fe5a9631.hot-update.js 676 bytes [emitted] [immutable] [hmr] (name: main)
asset index.html 287 bytes [emitted]
asset main.c161a0c51f50fe5a9631.hot-update.json 28 bytes [emitted] [immutable] [hmr]
Entrypoint main 4.06 MiB = index.bundle.js 4.06 MiB main.c161a0c51f50fe5a9631.hot-update.js 676 bytes
cached modules 1.07 MiB [cached] 48 modules
runtime modules 27.1 KiB 13 modules
./src/App.js 277 bytes [built]
webpack 5.64.1 compiled successfully in 118 ms
assets by status 4.06 MiB [cached] 1 asset
asset index.html 287 bytes [emitted]
cached modules 1.07 MiB (javascript) 27.1 KiB (runtime) [cached] 62 modules
webpack 5.64.1 compiled successfully in 15 ms
<i> [webpack-dev-middleware] wait until bundle finished: /
assets by status 4.06 MiB [cached] 1 asset
asset index.html 287 bytes [emitted]
cached modules 1.07 MiB (javascript) 27.1 KiB (runtime) [cached] 62 modules
webpack 5.64.1 compiled successfully in 16 ms
You can check the boilerplate here in repo
So, page is reloaded successfully but there are no changes. What the problem can be there?
UPDATE 1:
I'm updating jsx inside of this script for anything else - src/app.js
import React from "react";
function App() {
return (<div>
<h2>Welcome to React App</h2>
<h3>Date : {new Date().toDateString()}</h3>
</div>)
}
export default App
But the changes are visible only after restarting webpack dev server.
To reproduce the problem you can easily clone the repo and run this script in react-app directory:
npm i
npm start
I found the problem.
index.js had:
import App from "./App"
but correct one is:
import App from "./app"
Strange thing. It's like there should be an error instead of silence.
From this blogpost example https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript, I tried to get scss variables in my js code and I did not manage to do it.
index.js file
import variables from './variables.scss';
console.log(variables);
variables.scss file
$myvar: 100;
:export {
myvar: $myvar;
}
webpack.config.js file
module.exports = {
mode: 'development',
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}]
}
};
dependencies in package.json file
"dependencies": {
"css-loader": "^5.0.2",
"lodash": "^4.17.20",
"postcss-loader": "^5.0.0",
"sass": "^1.32.6",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.21.2",
"webpack-cli": "^4.5.0"
}
Compilation : npx webpackOutput :
asset main.js 17.2 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 9.23 KiB
modules by path ./src/ 1020 bytes
./src/index.js 324 bytes [built] [code generated]
./src/variables.scss 371 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/variables.scss 325 bytes [built] [code generated]
modules by path ./node_modules/ 8.23 KiB
./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
webpack 5.21.2 compiled successfully in 503 ms
In the web console, the object variables is empty and of course, I could not use variables.myvar.
Is there a configuration problem in webpack.config.js ? I tried to simplify it as much as possible. All node_modules are up to date and npm version is 6.14.9.
Thanks for help.
I wasn't aware of it but maybe this only works for "css modules". I never tried it without having css-loader configured to be module based. (you can see in my config in this answer that modules are activated)
Please try the following: rename your variables.scss into variables.module.scss
Because by default the css-loader will treat your files as modules or not as modules based on the filename (https://webpack.js.org/loaders/css-loader/#modules).
tl;dr: Webpack won't compile and I'm not sure why when everything looks syntactically correct, and also I don't fully understand what this error is implying.
Trying to use webpack. Full disclosure: really new to this (js/front end in general). I finally resolved the other errors I was getting (mostly just pointing to wrong filepaths or syntax errors). I followed a youtube video to get this set up , which in hindsight might not have been the best idea, but I needed to begin somewhere and watching is easier than reading. Anyway so I followed that and got things moving. Installed everything with npm (see package.json below) and created the src/dist and so forth. I am not using React/Angular/Vue etc, just regular plain old vanilla javascript. And I'm on Linux, if that makes any bit of difference (I'd imagine not).
Then I was met with this error:
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/alan/dev/privateFolder/shrektime
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 91bf4b6307b254c69adc
Version: webpack 4.44.1
Time: 1110ms
Built at: 04/09/2020 04:20:38
Asset Size Chunks Chunk Names
.dist/index.html 1.39 KiB [emitted]
55e664c36a02d03a083764a7c577f012.png 17.2 KiB [emitted] [immutable]
bundle.js 374 KiB main [emitted] main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/js/components/Calendar.js] 1.18 KiB {main} [built]
[./src/js/components/Input.js] 171 bytes {main} [built]
[./src/js/components/Results.js] 603 bytes {main} [built]
[./src/js/handlers/base.js] 356 bytes {main} [built]
[./src/main.js] 2.7 KiB {main} [built]
+ 23 hidden modules
ERROR in Error: /home/alan/dev/privateFolder/shrektime/node_modules/style-loader/dist/runtime/injectStylesIntoSty leTag.js?:93
var style = document.createElement('style');
^
ReferenceError: document is not defined
- injectStylesIntoStyleTag.js?:93 insertStyleElement
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:93:15
- injectStylesIntoStyleTag.js?:208 addStyle
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:208:13
- injectStylesIntoStyleTag.js?:81 modulesToDom
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:81:18
- injectStylesIntoStyleTag.js?:239 module.exports
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:239:25
- style.css?:15 eval
/home/alan/dev/privateFolder/shrektime/src/style.css?:15:14
- index.html:240 Object../src/style.css
/home/alan/dev/privateFolder/shrektime/src/index.html:240:1
- index.html:21 __webpack_require__
/home/alan/dev/privateFolder/shrektime/src/index.html:21:30
- loader.js:3 eval
[index.html?.]/[html-webpack-plugin]/lib/loader.js:3:34
- index.html:133 Object../node_modules/html-webpack-plugin/lib/loader.js!./src /index.html
/home/alan/dev/privateFolder/shrektime/src/index.html:133:1
- index.html:21 __webpack_require__
/home/alan/dev/privateFolder/shrektime/src/index.html:21:30
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
55e664c36a02d03a083764a7c577f012.png 17.2 KiB [emitted] [immutable]
+ 1 hidden asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 5.29 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/html-loader/dist/runtime/getUrl.js] 548 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 4.34 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js] 6.64 KiB {HtmlWebpackPlugin_0} [built]
[./src/img/icons8-shrek-256.png] 80 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/components/Calendar.js] 1.18 KiB {HtmlWebpackPlugin_0} [built]
[./src/js/components/Input.js] 171 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/components/Results.js] 603 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/handlers/base.js] 356 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/handlers/dateHandler.js] 1.97 KiB {HtmlWebpackPlugin_0} [built]
[./src/main.js] 2.7 KiB {HtmlWebpackPlugin_0} [built]
[./src/style.css] 519 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.
here is my package.json
{
"name": "shrektime",
"version": "1.0.0",
"description": "A stupid idea gone too far",
"main": "main.js",
"type": "module",
"dependencies": {
"fractional": "^1.0.0",
"lodash": "^4.17.20",
"moment": "^2.27.0"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"css-loader": "^4.2.2",
"file-loader": "^6.1.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.4.1",
"mini-css-extract-plugin": "^0.11.0",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"compile:sass": "node-sass src/sass/main.scss src/style.css -w",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode-development --open"
},
"author": "Alan Nardo",
"license": "ISC"
}
in my main.js folder I have the CSS and Sass imported as such:
import sass from './sass/main.scss';
import css from './style.css';
and finally my webpack.config.js file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: "./src/main.js",
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: "babel-loader" }
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{ loader: "file-loader" }
]
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: ".dist/index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
This is an image of my folder structure:
I just had, and solved this issue, without finding an answer on stackoverflow.
So here how I caused this problem:
In webpack, in your loader section, if you leave out the 'test' part of your rule,
you may trigger this error.
The issue is, that webpack will invoke your loader
on the wrong kinds of files, and give errors like this.
..
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader', exclude: /node_modules/
},
]
}
..
(I'm aware the above question contains tests, but my reputation is too low to comment, and I believe understanding the underlying causes of the error is relevant to figuring out how to solve them. I don't like unexplained 'I did thing and now it works!! kinds of answers.)
So I'm not sure if anyone else will have quite the same error, but just in case, there's nothing worse than searching forums and finding the exact same error and nobody leaving an answer.
I got help from a friendly redditor (shoutout r/learnjavascript) and it was basically just a few syntax errors here and there and me not understanding how things work.
under the HtmlWebpackPlugin I had to change the filename from .dist/index.html to index.html and had to add in the following code in the module.exports of webpack.config.js for the webpack-dev-server to run:
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
which is pulled right from the docs page https://webpack.js.org/configuration/dev-server/#devserver. Presumably you can choose any port number you fancy.
Additionally, I had to change how I imported one of my js files as it is a class (and tbh I should probably change that but I'll cross that bridge when I get to it). It's called Calendar.js so instead of doing import * as Calendar from './Calendar' I had to use import Calendar from './Calendar'.
Finally, in my src/index.html I left in the style and script tags for the css and main.js respectively, so I had to remove those.
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.
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