I have been using webpack and yarn for a while now, to build this wordpress project using a theme from underscores.me, only recently my webpack does not seem to compile my sass anymore. If i make changes to my sass file they do not show up in the site. The webpack it self seems to run fine without error when i run webpack --watch but even if i delebrately write a wrong code in my scss the webpack don't even detects it. It does not seem to be away of what is happening.
Here is my configuration:
//webpack.config.js
var webpack = require('webpack');
var GoogleFontsPlugin = require("google-fonts-webpack-plugin");
// exports the node module
module.exports = function(env) {
'use strict';
return {
entry: "./js/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
/* ... */
plugins: [
new GoogleFontsPlugin({
fonts: [
{ family: "Source Sans Pro" },
{ family: "Raleway", variants: [ "400", "600","900", "700italic", "Regular", "Medium","Bold","Extra-Bold", "Black"] }
]
/* ...options */
})
],
module: {
loaders: [
{
test: /\.html$/,
loader: 'raw-loader',
exclude: /node_modules/
},
{
test : /\.css$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', "postcss-loader"]
}, {
test : /\.scss$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
},
// the url-loader uses DataUrls.
// the file-loader emits files.
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
{
// I want to uglify with mangling only app files, not thirdparty libs
test: /.*\/app\/.*\.js$/,
exclude: /.spec.js/, // excluding .spec files
loader: "uglify"
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file-loader', {
loader: 'image-webpack-loader',
options: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: '65-90',
speed: 4
},
mozjpeg: {
progressive: true,
quality: 65
},
// Specifying webp here will create a WEBP version of your JPG/PNG images
webp: {
quality: 75
}
}
}
]
}
]
}
}
}
Related
I have placed a csv file in my assets folder for my react app, however, that file is not getting picked up and added to my dist build via webpack (the images are still added as assets to the build but the csv file is not). You can see my webpack build below. So how do I add a csv file to my dist build via webpack (the goal is for users of my app to be able to download this file)? Thanks!
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const config = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
},
allowedHosts: [
'localhost',
'fatpandadev'
],
public: 'fatpandadev:8080'
},
});
module.exports = config;
webpack.common.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
const config = {
entry: [
"babel-polyfill",
`${SRC_DIR}/app/index.js`,
`${SRC_DIR}/app/assets/stylesheets/application.scss`,
`${SRC_DIR}/app/components/index.scss`,
"font-awesome/scss/font-awesome.scss",
"react-datepicker/dist/react-datepicker.css",
"rc-time-picker/assets/index.css",
"react-circular-progressbar/dist/styles.css",
"#trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
],
output: {
path: `${DIST_DIR}/app/`,
filename: "bundle.js",
publicPath: "/app/"
},
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
{
test: /\.(txt|csv)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "application.css"
})
]
};
module.exports = config;
(this answer is only referenced on the server side)
In addition to #PlayMa256,
On Server side(Nodejs runtime), you may need emitFile: true
{
test: /\.(txt|csv|mmdb)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[path][name].[ext]",
emitFile: true,
},
},
],
},
Refer to this PR: https://github.com/webpack-contrib/file-loader/pull/135
In my opinion, file-loader way seem to better than copy-webpack-plugin way.
You can test like below:
import csvPath from './assets/data.csv'
console.log(csvPath) // assets/data.csv
Tested version:
$ cat node_modules/webpack/package.json | jq .version
"4.29.5"
$ cat node_modules/file-loader/package.json | jq .version
"3.0.1"
You might want to check the CopyWebpackPlugin if you have no need to process/parse the files, but only to copy them to your dist folder.
Copy Webpack Plugin
Copies individual files or entire directories to the build directory
Install
npm i -D copy-webpack-plugin
Usage
webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
const config = {
plugins: [
new CopyWebpackPlugin([ ...patterns ], options)
]
}
Patterns
A simple pattern looks like this
{ from: 'source', to: 'dest' }
{
test: /\.(txt|csv)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
You should import you csv file as you import your images too.
import your csv files using raw-loader,
{
test: /\.csv$/i,
use: 'raw-loader',
}
I want to use sass stylesheets that are organized with each of my react components, like this:
components/
|- componentOne
|- componentOne.js
|- componentOne.scss
|- componentTwo
|- componentTwo.js
|- componentTwo.scss
|- componentThree
|- componentThree.js
|- componentThree.scss
Are there any webpack settings / tools that will automatically load and compile all .scss files in a certain directory?
EDIT:
So the below is the current webpack config that I am using (written from a previous developer). I added in the line line in entries of SRC_DIR + "/app/components/", so that extract-text-webpack-plugin will pick up all of the .scss files in the components directory. But when I try to run the build I get the following error message. What am I doing wrong? Thanks.
ERROR in multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css #trendmicro/react-toggle-switch/dist/react-toggle-switch.css
Module not found: Error: Can't resolve '/Users/user123/dev/project/src/app/components/' in '/Users/user123/dev/project'
# multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css #trendmicro/react-toggle-switch/dist/react-toggle-switch.css
Webpack config:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
const config = {
entry: [
"babel-polyfill",
SRC_DIR + "/app/index.js",
SRC_DIR + "/app/assets/stylesheets/application.scss",
SRC_DIR + "/app/components/",
"font-awesome/scss/font-awesome.scss",
"react-datepicker/dist/react-datepicker.css",
"rc-time-picker/assets/index.css",
"react-circular-progressbar/dist/styles.css",
"#trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
],
output: {
path: DIST_DIR + "/app/",
filename: "bundle.js",
publicPath: "/app/"
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
}
},
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
]
},
plugins: [
new ExtractTextPlugin({
filename: "application.css",
allChunks: true
})
]
};
module.exports = config;
In order to compile your scss, webpack has to know about it. In order to let him know, you just import those scss files in your current component.
Now, what lasts you is to configure webpack. You are going to use sass-loader, css-loader and style-loader.
module.exports = {
entry: './src/',
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}
This is the most basic config that can be done.
If you want to have your compiled css into files, just use Mini-css-extract-plugin
module: {
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.less$/,
loaders: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
},
},
},
resolve: {
extensions: [ '.css', '.scss'],
}
I am trying to load the Bourbon package inside my SCSS files. I am using Angular 2 and this is my webpack 3.0 config:
var path = require("path");
var webpack = require("webpack");
module.exports = {
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.join(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
When I run webpack I get this error:
ERROR in
./node_modules/css-loader!./node_modules/sass-loader!./client/app/app.scss
Module build failed: #import "bourbon"; ^
File to import not found or unreadable: bourbon. Parent style sheet: stdin
in /Users/john/NG6-starter/client/app/app.scss (line 2, column 1) # ./client/app/app.scss 4:14-116 # ./client/app/app.component.js
# ./client/app/app.js # multi
(webpack)-dev-server/client?http://localhost:9000 ./client/app/app.js
webpack: Failed to compile.
Why does the bourbon component cannot be found? Here is a link to the code
June 2021 Update: In version 8.0.0 the development team of sass-loader has decided to move all SASS-related options to a sassOptions object inside options:
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
sassOptions: {
includePaths: ["node_modules/bourbon/core"],
}
}
}]
}]
}
Pre 8.0.0:
You need to pass options.includePaths to sass-loader:
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["node_modules/bourbon/core"]
}
}]
}]
}
I have the following css files:
<link rel="stylesheet" href="style/select.css">
<link rel="stylesheet" href="style/site.css">
and the following webpack config
var path = require("path");
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname + '/dist'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader?verbose=true&warn=true',
options: {debug: true, warn: true},
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
],
noParse: /\.elm$/,
},
devServer: {
inline: true,
stats: { colors: true }
},
resolve: {
mainFields: [ 'main'],
}
};
when I use webpack-dev-server, the in memory file server seems to have the correct css files. However when I call
yarn build
it does not copy the css files in my dist folder and therefore fails to load the css files.
Are you importing the css files in your modules? I think you need to use the ExtractTextWebpackPlugin which extract the css from the js bundle into a separate css file.
This will not work with webpack-dev-server though, so you need to disable the plugin in the configuration that you use for the dev server. There is an option that allows you to do that:
new ExtractTextPlugin({
filename: '[name].css',
disable: true,
}),
Try this config to webpack 4,
For loader:
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: {modules:true, importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(/* pluginOptions */)
]
} }
]
For plugin section:
new MiniCssExtractPlugin({
filename: '[name].css' }),
Version: webpack 3.5.5
when i run the webpack -d --watch in terminal..
It just so slow to run the build ... Total Time: 174094ms
I install the image-webpack-loader in my webpack to compress my png images file..
but everytime run the webpack -d --watch in development mode.. it always compress again.. how do i run once only for the loader when in development...
I want run the compress loader when i run webpack -p to build production code
here is my webpack config file:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './public/js/app.js',
watchOptions: {
poll: true
},
output: {
path: __dirname + '/public/js/',
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../font/'
}
}
]
},
{
test: /\.png$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../img/compress/'
}
},
{
loader: 'image-webpack-loader',
options: {
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '65-90',
speed: 4
}
}
}
]
},
{
test: /\.css$/,
exclude: /(node_modules)/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}
)
}
]
},
plugins: [
new UglifyJSPlugin({
sourceMap: false,
mangle: false,
minimize: true,
compress: true
}),
new ExtractTextPlugin({
filename: "../css/app.bundle.css"
})
]
};
The question is outdated, but I still want to answer it for future visitors.
You can add the bypassOnDebug option to your loader, as shown below. This ensures that compression is 'bypassed' during development and only executed during production. This will greatly enhance your builds during development mode!
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
}
For more information, you can visit https://github.com/tcoopman/image-webpack-loader#usage