I'm having a problem with a pretty straight forward webpack configuration:
var webpack = require('webpack');
path = require('path');
var PATHS = {
app: __dirname + "/app"
};
var config = {
context: PATHS.app,
entry: {
app: ['webpack/hot/dev-server', './core/bootstrap.js']
}
,
// entry: './core/bootstrap.js',
output: {
path: PATHS.app,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: 'ng-annotate!babel', exclude: /node_modules/},
{test: /\.less$/, loader: "style!css!less", exclude: /node_modules|bower_components/},
{test: /\.json$/, loader: "json", exclude: /node_modules|bower_components/},
{test: /\.html$/, exclude: /node_modules/, loader: "raw"},
{test: /\.(ttf|eot|svg|otf)$/, loader: "file"},
{test: /\.woff(2)?$/, loader: "url?limit=10000&minetype=application/font-woff"}
]
},
plugins: [
new webpack.DefinePlugin({
ON_TEST: process.env.NODE_ENV === 'test'
})
],
devtool: "#inline-source-map"
}
if (process.env.NODE_ENV === 'production'){
config.output.path = __dirname + '/dist';
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
config.devtool = 'source-map';
}
module.exports = config;
I'm trying to build a minified version of my code and but when I'm running
NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html there is no bundle.min.js in my dist folder and when I'm running http-server dist I'm getting Uncaught Error: [HMR] Hot Module Replacement is disabled.
From going through the web I see that this is a common problem but nowhere did I find the way to fix this: I'm using the --hot flag that suppose to add the hot-swap plugin.
Related
I have this configuration in my webpack and I need to add sass-loader,
I already added the dependencies using
npm install sass-loader sass webpack --save-dev
But I'm confused where I include the sass loader and the documentation settings.
Now how to add to my webpack?
'use strict'
const path = require('path')
const webpack = require('webpack')
const validate = require('webpack-validator')
module.exports = validate({
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, 'src', 'index'),
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
preLoaders: [{
test: /\.js$/,
exclude: /node_modules/,
include: /src/,
loader: 'standard'
}],
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
include: /src/,
loader: 'babel'
}],
}
})
I assume you want to add sass-loader in order to support scss files.
Add a new item to the loaders/rules array:
If you use webpack < v3:
loaders:[
...,
{
test: /\.(scss|sass)$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
For webpack > v3 add a rule like this:
rules:[
...,
{
test: /\.(scss|sass)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
}
]
For more details look here https://webpack.js.org/loaders/sass-loader/
I have been using this webpack config for loading babel and css loaders, but getting error. My webpack config works very well, if I use only babel loader, but css loader isn't working.
var path = require('path');
var config = {
entry: './main.js',
output: {
path : path.join(__dirname, './'),
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader',
}
]
}
}
module.exports = config;
The error I am getting while running webpack is
ERROR in ./~/css-loader!./main.js
Error screenshot
You need to configure the CSS loaders for imports matching .css not .jsx. Right now you're passing a JavaScript file to the css-loader, which isn't valid CSS, so it fails. The correct loader configuration is:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
}
]
}
You need style loader in your webpack config:
Example from one of my projects:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},
],
},
...
I am developing Dapp using Truffle v3.1.2 which is a development framework for Ethereum.I am using angular on node for this dapp & unfortunately I am very new to node & webpack.I am storing views in /views folder, images in /images folder & I need some help to modify the webpack.config.js file.I am using “npm run dev” to deploy it & I am getting “Error: [$compile:tpload] Failed to load template: views/main.html (HTTP status: 404 Not Found)” message.Please find the webpack.config.js file below.
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: [
'./app/bower_components/angular/angular.js',
'./app/bower_components/angular-route/angular-route.js',
'./app/javascripts/app.js',],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.js'
},
plugins: [
// Copy our app's index.html to the build folder.
new CopyWebpackPlugin([
{ from: './app/index.html', to: "index.html" }
])
],
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
loaders: [
{ test: /\.json$/, use: 'json-loader' },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
]
}
}
This is my webpack.config file. When I run webpack, bundle.js correctly writes to project/dist/assets/bundle.js.
However, when I run npm start to serve up the files, I get an error:
Error: output.path needs to be an absolute path or /.
So... if I make the path absolute: "/dist/assets" or path: __dirname + "/dist/assets" then it serves up the files fine, and emits bundle.js, but it doesn't actually write it to my project/dist/assets folder.
The page looks fine and when I view source, I see <script src="/assets/bundle.js"></script> but it only exists on the localhost (publicPath).
Where am I going wrong? The goal being for npm start to write the bundle to my project folder AND serve it up with devServer.
var webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: "./dist/assets",
filename: "bundle.js",
publicPath: "/assets"
},
devServer: {
inline: true,
contentBase: "./dist",
port: 3000
},
module: {
loaders: [{
test: /\.js$/,
exclude: /(node_modules)/,
loader: ["babel-loader", "babel-loader?presets[]=latest,presets[]=stage-0,presets[]=react"]
}, {
test: /\.json$/,
exclude: /(node_modules)/,
loader: "json-loader"
}, {
test: /\.css$/,
loader: "style-loader!css-loader!autoprefixer-loader"
}, {
test: /\.scss$/,
loader: "style-loader!css-loader!autoprefixer-loader!sass-loader"
}]
}
}
Use path for this:
var path = require('path');
....
output: {
path: path.join(__dirname, './dist/assets'),
I am trying to configure webpack 2 for my react development app. Seems like there is something I am missing below is my webpack.config.dev
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import path from 'path';
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var loaders = [
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
];
export default {
resolve: {
extensions: ['', '.js', '.jsx', '.json']
},
devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
entry: {
app: path.resolve(__dirname, 'src/index.js'),
vendor: ["react", "react-dom"]
},
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.resolve(__dirname, 'dist'), // Note: Physical src are only output by the production build task `npm run build`.
publicPath: '/',
filename: "[name].entry.chunk.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[name].[hash].js', }),
new ExtractTextPlugin("[name].css"),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
template: path.join(__dirname, './src/index.html'),
filename: 'index.html',
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: true
},
})
],
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
{test: /\.ico$/, loader: 'file?name=[name].[ext]'},
{test: /(\.css|\.scss)$/, loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: loaders,
}) },
{test: /\.json$/, loader: "json"}
]
},
};
This is my github repo https://github.com/sourabh-garg/Webpack-2-starter-kit please clone it and and run npm install followed by npm start.
When I run it I get
ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (6:0)
render(
"<h1>Hello World!</h1>", document.getElementById('app')
);
Please let me know what I am missing.