In my React app I'm using Webpack. Here is my webpack.config:
"use strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
entry: "./Scripts/reactApp/index.jsx",
output: {
path: path.resolve(__dirname, "./Scripts/reactApp/build"),
filename: "react_bundle.js"
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: [/node_modules/, path.resolve(__dirname, "./Scripts/reactApp/translations/he.translations.json")],
use: {
loader: "babel-loader"
}
},
{
test: /\.js$/,
exclude: [/node_modules/, path.resolve(__dirname, "./Scripts/reactApp/translations/he.translations.json")],
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
I'm trying to exclude from bundle he.translations.json
But webpack included it whatever.
Can you explain me what I do wrong?
Sorry in advance, I'm new in webpack.
You can just do (from webpack docs)
...
exclude: [/node_modules/, path.resolve(__dirname, 'Scripts/reactApp/translations/he.translations.json')],
...
There's no dot in the path and, of course, assuming you have the wepback config file in the proper place.
Related
I have this setup currently. The first three entries (app, blocks, react) compile as expected to the rootDir/prod/[name].min.js - This already works
I want the 4th entry (which is a dynamic one). I have this directory: rootDir/gutenberg/blocks/[blockNameDir]/frontend.js; I want the frontend.js file for each of the [blockNameDir] directories to be compiled to the same directory as frontend.min.js.
I figured out how to use the glob for the dynamic entry, but I am stuck at the dynamic output. Thanks in advance.
const path = require('path');
var glob = require('glob');
const outputDir = path.resolve(__dirname, 'prod');
module.exports = {
mode: 'development',
entry: {
app: path.resolve(__dirname, './src/js/app.js'),
blocks: path.resolve(__dirname, './gutenberg/blocks.js'),
react: path.resolve(__dirname, './src/js/app-react.js'),
frontend: glob.sync(
path.resolve(__dirname, './gutenberg/blocks/**/frontend.js')
),
},
devtool: 'inline-source-map',
output: {
path: outputDir,
filename: '[name].min.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre',
},
],
},
};
How can I target all CSS and SCSS files in a folder with an entry point, process them and then output the result into a single file in Webpack 4?
For JavaScript seems very straightforward: In the following example, I'm getting all files with js extension located in assets/js then they are transpiled and saved into /dist/bundle.js:
const path = require("path")
const glob = require("glob")
module.exports = {
devtool: 'source-map',
entry: glob.sync("./assets/js/*.js"),
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ["es2015"] }
}
}
]
},
}
I'd like to do the same (along with the previous example) but with CSS and SCSS files. I've tried:
const path = require("path")
const glob = require("glob")
const mcep = require("mini-css-extract-plugin")
module.exports = {
devtool: 'source-map',
entry: {
javascript: glob.sync("./assets/js/*.js"),
css: glob.sync("./assets/css/**/"),
},
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ["es2015"] }
}
},
{
test: /\.(sa|sc|c)css$/,
use: [
{
loader: mcep.loader
},
{
loader: "file-loader",
/*options: {
name: "bundle.css",
outputPath: "dist/css/"
}*/
},
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
plugins: [
new mcep({
filename: "./dist/css/[name].css",
chunks: ['css']
})
]
}
but it does not work. Again, I'd like to target all files within a specific folder, process them and ouput them into /dist/css/something.css, I don't want to import them into a js file.
Thanks
I have simple config for demonstration that excludes node modules from js and jsx file, but can't find a solution to exclude node_modules, globally so I don't need to always specify this exclude in every loader
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: path.resolve(__dirname, "../src/index.js")
},
output: {
path: path.resolve(__dirname, "../dist"),
filename: "[name].[chunkhash].js",
publicPath: "/",
chunkFilename: "[name].[chunkhash].js"
},
module: {
rules: [
{ test: /\.js$/, loaders: ["babel-loader"], exclude: /node_modules/ },
{ test: /\.jsx$/, loaders: ["babel-loader"], exclude: /node_modules/ },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new CleanWebpackPlugin([path.resolve(__dirname, "../dist")]),
new HtmlWebpackPlugin({ template: path.resolve(__dirname, "../public/index.html") }),
new ExtractTextPlugin("styles.css")
]
};
Is there a way to achieve this? I'm on webpack 3
You can use
{ test: /\.jsx?$/, loaders: ["babel-loader"], exclude: /node_modules/ },
I am trying to process a .scss file with Webpack 2.2.0 but instead of getting it injected into a style tag into my index.html file, I wanted to extract it into a .css file with ExtractTextPlugin.
The following is my webpack.config.js file:
// webpack.config.js
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('[name].css');
module.exports = {
context: path.resolve(__dirname, './src'),
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
},
{
test: /\.(sass|scss)$/,
use: [
///////////////////////////////////////
// THIS WONT WORK AND CAUSES THE ERROR
///////////////////////////////////////
extractCSS.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader', 'sass-loader']
}),
/////////////
// THIS WORKS
/////////////
// 'style-loader', 'css-loader', 'sass-loader'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
},
plugins: [
extractCSS
]
}
Any help is appreciated. Thanks.
This is a bug currently in ETP. I believe my switching use to "loader" that this will solve your problem. Module parse failed error for SCSS file.
I have the following app structure:
/webapp
/lib
/assets
ic_add_black_24px.svg
ic_clear_black_24px.svg
..
..
Here is my webpack.config.js:
var path = require('path'),
webpack = require("webpack"),
libPath = path.join(__dirname, 'lib'),
wwwPath = path.join(__dirname, 'www'),
pkg = require(path.join(__dirname,'package.json')),
HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
entry: path.join(libPath, 'index.js'),
output: {
path: path.join(wwwPath),
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.(png|jpg|svg)$/,
loader: 'file-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.scss$/,
loader: "style!css!autoprefixer!sass"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.html')
}),
// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),
// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};
module.exports = config;
Here is how I am using the svg asset in one of my html file:
<md-card-header>
<span flex></span>
<md-button class="md-icon-button" aria-label="remove condition" style="background-color: #DCD8D8" ng-click="event.removeCondition(condition)">
<md-icon md-svg-src="/lib/assets/ic_clear_black_24px.svg"></md-icon>
</md-button>
</md-card-header>
When I do rm -rf www/* && webpack -p, it creates the bundle successfully, but without any assets loaded.. I have tried to use svg-loader, url-loader, file, but none of them works.. What am I doing wrong here?
In case it helps anyone, I ended up using CopyWebpackPlugin to load the assets manually to my required location. This is what my webpack.config looks like now:
var path = require('path'),
webpack = require("webpack"),
libPath = path.join(__dirname, 'lib'),
wwwPath = path.join(__dirname, 'www'),
pkg = require(path.join(__dirname,'package.json')),
CopyWebpackPlugin = require('copy-webpack-plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
entry: path.join(libPath, 'index.js'),
output: {
path: path.join(wwwPath),
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.(png|jpg|svg)$/,
loader: 'svg-url-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.scss$/,
loader: "style!css!autoprefixer!sass"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
new CopyWebpackPlugin([{
from: 'lib/assets',
to: wwwPath + '/lib/assets'
}]),
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.html')
}),
// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),
// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};
module.exports = config;