Style loader not loading css in my <head> - javascript

I am trying to import my css in my webpack bundle.
We are creating an angular 1 application and we are bundle it with webpack. For the moment everything was fine. The html has the bunlde and vendor scripts. Other js are been in included and the views are copied and included.
In this step we are trying to include a css file we create in a styles/ folder. For the output I guess that the css file is processed by css-loader, but the style-loader didn't include the css file in the tag.
Can anyone give me a hint?
My webpack.config in the rules is like this.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require ('webpack'); module.exports = {
mode: 'development',
entry: {
vendor: ['angular', '#uirouter/angularjs'],
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: 'dist',
hot: true,
inline: true,
open:'chrome',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management',
template: './src/index.html',
}),
new webpack.HotModuleReplacementPlugin(),
new CopyWebpackPlugin([
{
from: './src/views/**/*',
to: ''
},
], {
ignore: [],
copyUnmodified: true
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
attrs:[
':data-src'
]
}
}
}
]
}
};
My index.html is
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
My index.js is like this:
import first_controller from './controllers/first_controller.js';
import uiRouter from '#uirouter/angularjs';
//import css from './styles/main.css'; // I try this also
import './styles/main.css'; //This isn't working either.
var app = angular.module ('app', ['ui.router']);
app.controller ('first_controller', first_controler);
app.config(function($stateProvider) {
var exampleState = {
name: 'example',
url: '/example',
templateUrl: './src/views/example.html', }
$stateProvider.state(exampleState );
});
my css in the folder /styles/main
.example_css {
color: red;
}
And the example view is:
<div class="example_css">Example</div>
My package.json is:
{
"name": "Example",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"build": "webpack --colors",
"start": "webpack-dev-server --progress --colors --watch --inline --open"
},
"devDependencies": {
"angular": "^1.7.7",
"clean-webpack-plugin": "^2.0.0",
"copy-webpack-plugin": "^5.0.0",
"css-loader": "^2.1.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"#uirouter/angularjs": "^1.0.22"
}
}

Depending on your webpack version you want to use extract-text-webpack-plugin or mini-css-extract-plugin to put styles into a file.
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
To include a path to CSS file in index.html on build - see how to create templates with HtmlWebpackPlugin.

Related

How to bundle Nunjucks files via Webpack

I have a complete site that I want to design a build tool for it.In fact, I chose Webpack for doing that. The project structure is like this:
I have nunjucks, html, css, sass and js files. I must bundle them via webpack. My webpack config file is here:
var HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
const NunjucksWebpackPlugin = require('nunjucks-webpack-plugin')
module.exports = {
entry: ['./src/index.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
writeToDisk: true
},
plugins: [
new CopyPlugin([
{ from: 'public/images', to: 'images' },
{ from: 'public/fonts', to: 'fonts' },
{ from: 'src/pages/about', to: '.' }
]),
new CleanWebpackPlugin(),
// new HtmlWebpackPlugin()
new HtmlWebpackPlugin({
title: 'Asset Management' //title of file.html
})
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.s[ac]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|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
},
{
test: /\.(njk|nunjucks)$/,
loader: 'nunjucks-loader'
},
{
// to auto refresh index.html and other html
test: /\.html$/,
loader: 'raw-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
interpolate: true
}
}
]
}
]
}
}
The "index.js" file also is like this:
import _ from 'lodash'
import './pages/about/about_moon.scss'
import './pages/about/about_moon.html'
var tpl = require('./pages/home/index_moon.njk')
var html = tpl.render({ message: 'Foo that!' })
function component() {
return element
}
document.body.appendChild(component())
I configured the "package.json" file and defined scripts to run webpack:
"start": "webpack-dev-server --open",
"build": "webpack"
The problem is when I run npm run build, the dist folder was made and it had a html file but there is nothing to show. I have already had some html files and wanted to bundle all of them to "bundle.js", but I have not known how. Would you please tell me how I can bundle this project?
Thank you in advance.
Problem solved. I changed the Webpack.config.js file to this:
const path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
entry: ['./src/index.js', './script.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
// HtmlWebpackPluginConfig
new HtmlWebpackPlugin({
filename: 'index.html',
inject: 'head',
template: './index.njk'
}),
new CleanWebpackPlugin(),
new CopyPlugin([
{ from: 'public/images', to: 'images' },
{ from: 'public/fonts', to: 'fonts' }
])
],
module: {
rules: [
{
test: /\.exec\.js$/,
use: ['script-loader']
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.(scss)$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `#import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
plugins: function() {
return [require('autoprefixer')]
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
}
]
},
{
// HTML LOADER
// Super important: We need to test for the html
// as well as the nunjucks files
test: /\.html$|njk|nunjucks/,
use: [
'html-loader',
{
loader: 'nunjucks-html-loader',
options: {
// Other super important. This will be the base
// directory in which webpack is going to find
// the layout and any other file index.njk is calling.
// searchPaths: [...returnEntries('./src/pages/**/')]
// Use the one below if you want to use a single path.
// searchPaths: ['./']
}
}
]
}
]
}
}
Also, I wrote the script.js file like this, since, function names were changed and they could not be run after bundling.
document.getElementById('body').onload = function() {
console.log('Document loaded')
var menu = localStorage.getItem('menu')
if (menu === 'opened')
document.getElementById('navigation').classList.add('opened')
}
document.getElementById('menu-button').onclick = function() {
// localstorage used to define global variable
var menu = localStorage.getItem('menu')
localStorage.setItem('menu', menu === 'closed' ? 'opened' : 'closed')
document.getElementById('navigation').classList.toggle('opened')
}
// Window.onLoad = onLoad // global variable in js
The index.js was used to import other files and it was like this:
import _ from 'lodash'
require('../index.njk')
require('../base.html')
require('../style.css')
This is the Json file:
{
"name": "menu_moon",
"version": "1.0.0",
"description": "",
"private": true,
"dependencies": {
"browser-sync": "^2.26.7",
"extract-text-webpack-plugin": "^3.0.2",
"fast-glob": "^3.1.1",
"fs-extra": "^8.1.0",
"g": "^2.0.1",
"html-loader": "^0.5.5",
"i": "^0.3.6",
"lodash": "^4.17.15",
"mkdirp": "^0.5.1",
"nunjucks": "^3.2.0",
"nunjucks-html-loader": "^1.1.0",
"nunjucks-isomorphic-loader": "^2.0.2",
"nunjucks-loader": "^3.0.0",
"raw-loader": "^4.0.0"
},
"devDependencies": {
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.5",
"css-loader": "^3.2.1",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"nunjucks-webpack-plugin": "^5.0.0",
"sass-loader": "^8.0.0",
"script-loader": "^0.7.2",
"style-loader": "^1.0.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"scripts": {
"moon-start": "browser-sync start --server --files './**/*.*'",
"moon-build": "node build_product_moon.js",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
I hope it was useful for others.

HtmlWebpackPlugin - ERROR in Error: The loader "[...]/html-webpack-plugin - /lib/loader.js!/[...]/src/index.html" didn't return html

I'm trying to load an HTML template using HtmlWebpackPlugin and it seems not working. If I try to load the plugin without arguments it works. Any ideas?
The index.html file that I'm trying to load is in the right place, just to consider
package.json:
{
...
"devDependencies": {
"#babel/core": "^7.7.4",
"#storybook/html": "^5.2.8",
"babel-loader": "^8.0.6",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"css-loader": "^3.2.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.1",
"ts-loader": "^6.2.1",
"typescript": "^3.7.3",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"axios": "^0.19.0"
}
}
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.ts',
devtool: 'source-map',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /.(ts|tsx)?$/,
loader: 'ts-loader',
include: [path.resolve(__dirname, 'src')],
exclude: [/node_modules/]
}
]
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
devServer: {
hot: true,
host: '0.0.0.0'
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.scss', '.css']
}
};
For me, the solution was to make sure everything was updated.
I'm on Webpack 5, and everything except html-webpack-plugin was up to date. I updated html-webpack-plugin from v4 to v5, and the issue went away.
from html-webpack-plugin documentation
Don't set any loader
By default (if you don't specify any loader in any way) a fallback
lodash loader kicks in.
{
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}
Be aware, using .html as your template extention may unexpectedly
trigger another loader.
please follow the documentation first and see whether you have any loader conflicts.

Webpack throws error with list of pkg dependencies on splitting vendor from app

I am trying to implement code splitting in my webpack configuration for prod builds - separating vendor files from app code. But when I try to build, I get the following error:
ERROR in multi bootstrap font-awesome jquery popper.js progress-bar-webpack-plugin vue vue-resource vue-router vuex
Basically listing the packages in my dependencies.
Here's a snippet of what I have in my Webpack.dist.conf file:
const pkg = require('../package.json');
output: {
path: path.join(process.cwd(), conf.paths.dist),
filename: '[name]-[hash].js'
},
entry: {
app: `./${conf.path.src('index')}`,
vendor: Object.keys(pkg.dependencies)
}
EDIT
I found that the issue was with font-awesome. The moment I removed font-awesome from vendor.js, things started working fine. Still no idea what is wrong with font-awesome that caused this error though.
I tried using webpack-dll-bundle-plugin to separate vendor from app. It work like a charm :)
Hopefully it helps.
Sample webpack.config.js
const path = require('path');
const join = path.join.bind(path, __dirname);
const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
const pkg = require('./package.json');
const webpack = require('webpack');
module.exports = {
entry: {
main: './src/scripts/main.js'
},
output: {
path: path.resolve('./client'),
filename: '[name].js',
publicPath: '/client/',
chunkFilename: '[name].js'
},
cache: true,
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
// exclude: [path.join(__dirname, 'node_modules'), path.join(__dirname, './src', 'scripts', 'routes')],
exclude: [path.join(__dirname, 'node_modules')],
query: {
cacheDirectory: true,
presets: ['react', 'es2015'],
compact: false
}
}
]
},
plugins: [
new DllBundlesPlugin({
bundles: {
vendor: Object.keys(pkg.dependencies)
},
dllDir: join('client', 'vendor'),
webpackConfig: {
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false
})
]
}
})
],
resolve: {}
};
Package.json :
"dependencies": {
"classnames": "^2.2.5",
"es6-map": "^0.1.4",
"es6-promise": "^4.0.5",
"file-saver": "^1.3.3",
"guid": "0.0.12",
"jquery": "^3.1.1",
"lodash": "^4.17.4",
"moment": "^2.14.1",
"prop-types": "^15.6.0",
"react": "^15.4.2",
"react-addons-transition-group": "^15.4.2",
"react-dom": "^15.4.2",
"react-draggable-tab": "^0.8.1",
"xml-writer": "^1.7.0"
}

Webpack 2 - How to stop generating .js files for CSS and HTML?

I'm a total newcomer to Webpack (2) so please forgive me for my simple understanding so far.
Following from a few tutorials around the web, I've cobbled together a working package.json and webpack.babel.config.js file.
Essentially, I am trying to turn SCSS into CSS, Pug into HTML and JS into Babel'd JS.
When I run my dist command, it produces the files, but also along with it, are .js files for each .scss and .html etc. Hopefully the image below can illustrate this:
Ideally what I'm after is simply, app.css, index.html and app.js.
webpack.babel.config.js
import webpack from 'webpack';
import path from 'path';
import autoprefixer from 'autoprefixer';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const extractHtml = new ExtractTextPlugin({
filename: '[name].html'
});
const extractPug = new ExtractTextPlugin({
filename: '[name].[contenthash].pug'
});
const extractScss = new ExtractTextPlugin({
filename: '[name].[contenthash].css',
allChunks: true
});
let config = {
stats: {
assets: false,
colors: true,
version: false,
hash: true,
timings: true,
chunks: false,
chunkModules: false
},
entry: {
'dist/html/app': [
path.resolve(__dirname, 'src/pug/app.pug')
],
'dist/js/app': [
path.resolve(__dirname, 'src/js/app.js')
],
'dist/css/app': [
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: path.resolve(__dirname, './'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.pug$/,
use: extractHtml.extract({
use: ['html-loader','pug-html-loader?pretty=false&exports=false']
})
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: extractScss.extract({
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: false,
stats: 'errors-only',
open: false
},
plugins: [
new HtmlWebpackPlugin({
title: 'Portfolio',
// minify: {
// collapseWhitespace: true
// },
hash: true,
template: './dist/html/app.html',
filename: 'index.html'
}),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
options: {
babelLoader: {
presets: [
['es2015']
]
},
postcss: [
autoprefixer({
browsers: ['last 2 versions', 'Explorer >= 9', 'Android >= 4']
})
],
sassLoader: {
includePaths: [
path.resolve(__dirname, 'node_modules/sanitize.css/')
]
}
}
}),
extractScss,
extractHtml,
extractPug
]
}
export default config;
package.json
{
"name": "portfolio",
"version": "1.0.0",
"description": "Portfolio of Michael Pumo",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"prod": "webpack -p",
"dist": "webpack --config webpack.config.babel.js"
},
"author": "Michael Pumo",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"css-loader": "^0.27.3",
"extract-text-webpack-plugin": "^2.1.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"html-webpack-pug-plugin": "^0.0.3",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.3",
"pug": "^2.0.0-beta11",
"pug-html-loader": "1.1.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.14.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
}
}
I have many other issues I'd like to resolve too but I'm taking it one issue at a time. Thanks for your help.
You don't want to use multiple entries, but instead add it to a single entry. For it to work nicely with the extract-text-webpack-plugin you should also change the output a little. It makes it much easier when you set output.path to the dist/ directory, which also makes more sense conceptually. You'll have one entry point for app and then you set the output for the different file types to the corresponding directories. For JavaScript that's the output.filename option, which you want in js/. Your entry and output should look likes this:
entry: {
app: [
path.resolve(__dirname, 'src/pug/app.pug'),
path.resolve(__dirname, 'src/js/app.js'),
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
And you do the same thing as with output.filename for the filename in the extract text plugins:
const extractHtml = new ExtractTextPlugin({
filename: 'html/[name].html'
});
const extractScss = new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css',
allChunks: true
});
You didn't use extractPug at all, so I left it off and you probably want to remove it.
The output will look likes this:
dist
├─ css
│  └─ app.50352154102b272d39e16c28ef00c1ac.css
├─ html
│  └─ app.html
├─ js
│  └─ app.js
└─ index.html
Now you also have index.html in the dist directory and you can simply deploy the dist directory, as it's self-contained.
On a side note: You should not use ./dist/html/app.html as a template to html-webpack-plugin but instead use the .pug file directly with the pug-loader, which means that you don't even need to add it to the entry or extract the HTML.
From what I understand, there is one output for each of your entry points (this seems to suggest that way). I believe the most common use case is that there is only one entry point (usually app.js or index.js), and all the required files (like css and other js files) are "required" in the app.js (or import if you are using ES6). That way, there is just one output js file. Also, you can define where to store the individual output files for each loader in the loader's query.
For example, this is a part of my webpack config file:
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']},
{test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader', query: {name: 'fonts/[name].[ext]'}},
{test: /\.(jpg|png)$/, loader: 'file-loader', query: {name: 'img/[name].[ext]'}},
{test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'}
]
}
The query parameter on each loader is specifying the output directory and filename for each of the loaders.

Not able to transpile jsx to js using babel

I am learning react and here is my simple project sturcture:
my_project
--node_modules
--index.js
--index.html
--package.json
--.babelrc
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
package.json
{
"name": "my_project",
"version": "1.0.0",
"description": "frontend using react js",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d dist"
},
"scripts": {
"build": "babel --presets es2015 -d dist"
},
"author": "kishan",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-cli": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"webpack": "^2.2.1"
},
"babel": {
"plugins": ["transform-react-jsx"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}
}
webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
config = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./index.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
module.exports = config;
I am getting following error in console in browser for index.js line 1:
Uncaught SyntaxError: Unexpected token import
Please help me what is wrong with this code?
You forgot to define the babel-loader in webpack file, put this part:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
Use this webpack file:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var config = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./index.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
}
module.exports = config;
Update:
From Webpack Doc:
When using watch mode, webpack installs file watchers to all files,
which were used in the compilation process. If any change is detected,
it’ll run the compilation again. When caching is enabled, webpack
keeps each module in memory and will reuse it if it isn’t changed.
Add babel-loader in webpack to transpile jsx or js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
config = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./index.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
module.exports = config;
Starting the webpack in watch mode and will not require you to build again to do that add the followign in your package.json
"scripts": {
"build": "webpack --progress --color --config webpack.config.js --watch",
}
You may also use webpack-dev-server in hot-loading mode

Categories