When running webpack-dev-server produces an error
Module build failed: TypeError: text.forEach is not a function
enter image description here
'use strict';
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: {
app: ['./client/main.js'],
index: ['./server/index.pug']
},
output: {
path: path.resolve(__dirname, "..", "public",'js'),
publicPath: "/js/",
filename: '[name].js'
},
module: {
rules: [
{
test: /\.pug$/,
loader: ExtractTextPlugin.extract( 'pug-loader')
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader"
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader"
}]
})
},
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
resolve: {
extensions: [".vue", ".js", ".json",".pug",".html"],
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
plugins: [
new ExtractTextPlugin("[name].html"),
new ExtractTextPlugin("[name].css"),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "main",
minChunks: 2
})
],
}
Before that, I tried to do it through HtmlWebpackPlugin but there it returned plain text!
Related
I'm using pug and scss with webpack 5. I have kept main.js and main.css both bundled by webpack but still the path is not resolved tried specific js path in src folder but same thing, they are not loading.
structure is like:
src:
index.js
style:
index.scss
views:
pages:
home.pug
base.pug
Please help it out
error picture
webpack.config.js:-
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const IS_DEVELOPMENT = 'dev'
module.exports = {
entry: [
path.resolve(__dirname, 'src/index.js'),
path.join(__dirname, 'styles/index.scss')
],
output:
{
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
plugins:
[
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, 'static') }
]
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, './views/pages/home.pug'),
minify: true
}),
new MiniCSSExtractPlugin({
filename: IS_DEVELOPMENT ? '[name].css' : '[name].[contenthash].css',
chunkFilename: IS_DEVELOPMENT ? '[id].css' : '[id].[contenthash].css',
})
],
module:
{
rules:
[
{
test: /\.(html)$/,
use: ['html-loader']
},
{
test: /\.(pug)$/,
use: ['html-loader', 'pug-html-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use:
[
'babel-loader'
]
},
{
test: /\.css$/,
use:
[
MiniCSSExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.scss$/,
use:
[
{
loader: MiniCSSExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader'
}, {
loader: 'resolve-url-loader'
}, {
loader: 'sass-loader'
}
]
},
{
test: /\.(gltf|glb)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/models/'
}
}
]
},
{
test: /\.(jpg|png|gif|svg)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/images/'
}
}
]
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/fonts/',
name: 'fonts/[name].[ext]',
mimetype: 'application/font-woff',
publicPath: '../'
}
}
]
},
{
test: /\.(glsl|vs|fs|vert|frag)$/,
exclude: /node_modules/,
use: [
'raw-loader',
'glslify-loader'
]
}
]
}
}
I'm using React 16, Webpack 3 and Bootstrap 4 beta.
I'm trying to load .scss files into React using something similar to the following import styles from './styles/app.scss'. At the moment I am using import style from 'style-loader!css-loader!sass-loader!applicationStyles';. I would like to move away from using the sass-loader in the .js file.
Any help improving up my webpack config would also be most welcome as it's a mess...
Here's my webpack file:
const webpack = require('webpack');
const path = require('path');
const envFile = require('node-env-file');
require('babel-polyfill');
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
try {
envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'))
} catch (e) { }
module.exports = {
entry: [
'script-loader!jquery/dist/jquery.min.js',
'babel-polyfill',
'whatwg-fetch',
'./app/app.jsx',
],
externals: {
jQuery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jQuery',
'jQuery': 'jQuery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
API_KEY: JSON.stringify(process.env.API_KEY),
API_DOMAIN: JSON.stringify(process.env.API_DOMAIN),
API_FILE_DOMAIN: JSON.stringify(process.env.API_FILE_DOMAIN),
}
}),
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
modules: [
__dirname,
'node_modules',
'./app/api',
'./app/constants',
],
alias: {
applicationStyles: 'app/styles/app.scss'
},
extensions: ['.js', '.jsx']
},
devServer: { historyApiFallback: { index: 'public/index.html' }, },
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
},
// {
// loader: 'sass-loader',
// options: {
// includePaths: [ path.resolve(__dirname, './node_modules/bootstrap/scss')]
// },
// test: /\.scss?$/,
// },
{
loader: 'css-loader',
options: {
includePaths: [path.resolve(__dirname, './node_modules/react-table/react-table.css')]
},
test: /\.css?$/,
}
],
// I tried this but it gave me an error
// rules:[
// {
// test: /\.scss$/,
// use: [
// { loader: "style-loader" },
// { loader: "css-loader" },
// { loader: "sass-loader" }
// ]
// }
// ],
},
devtool: process.env.NODE_ENV === 'production' ? undefined : 'eval-source-map'
};
Here are the imports in my App.jsx file
import 'bootstrap'
import style from 'style-loader!css-loader!sass-loader!applicationStyles';
import 'style-loader!react-table/react-table.css';
I added rules to my webpack - see below:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: { loader: 'babel-loader'}
},
{
test: /\.css?$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
]
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
]
},
so now I can just do:
import style from 'applicationStyles';
import 'react-table/react-table.css';
Make it more simple.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
rules: [
{
test: /\.(css|scss)$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
{
test: /\.s[ac]ss$/i,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
modules: true,
localsConvention: "camelCase",
sourceMap: true,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
}
}
I begin to leart webpack and stack. In code below doesn't create new css file and 'main.css' and i don't understand why. Code ends successfully and jade>html creating.
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: "dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
options: { presets: ["es2015"] }
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style','css')
},
{
test: /\.jade$/,
loader: "jade"
}]
},
plugins: [
new ExtractTextPlugin("main.css"),
new HtmlWebpackPlugin({
template: './src/jade/index.jade'
})
]
};
I have this webpack config
var Webpack = require("webpack");
var Path = require("path");
var OutputPath = "build";
module.exports = {
entry: "./src/app.tsx",
output: {
path: Path.join(__dirname, OutputPath, "" + process.env.NODE_ENV),
publicPath: "",
filename: "bundle.js"
},
devtool: "source-map",
devServer: {
contentBase: OutputPath
},
resolve: {
extensions: ["", ".ts", ".tsx", ".webpack.js", ".web.js", ".js", ".html"],
alias: {
jquery: "jquery/src/jquery"
}
},
node: {
fs: "empty"
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{ test: /\.html$/, loader: "html-loader!file-loader?name=[name].[ext]" },
{ test: /\.ejs$/, loader: "ejs-loader" },
{
test: /\.svg$/,
loaders: [
"url-loader?limit=100000&name=assets/[name].[hash].[ext]",
"image-webpack?bypassOnDebug=false&optimizationLevel=7&interlaced=false"
]
},
{
test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot|ico)$/,
loader: "url-loader?limit=100000&name=assets/[name].[hash].[ext]"
},
,
{
test: /\.css$/,
exclude: /.*onsenui.*$/,
loader: "ignore-loader"
}
,
{
test: /\.(less|css)$/,
exclude: /.*(font_awesome|ionicons|iconic-font).*$/,
loader: "style-loader!css-loader?-import!less-loader!postcss-loader"
}
],
}
};
Application is built on onsenui and I am trying to ignore specific filename from css import.
#import url("font_awesome/css/font-awesome.min.css");
#import url("ionicons/css/ionicons.min.css");
#import url("material-design-iconic-font/css/material-design-iconic-font.min.css");
...
We can comment out the specific lines, but we don't want to do it every update npm packages.
Does anyone know, how to ignore that css imports?
Finally I just installed "string-replace-webpack-plugin" and use this way.
var StringReplacePlugin = require("string-replace-webpack-plugin");
Then adding that plugin into preloader does the work
preLoaders: [
{
test: /onsenui\.css$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /.*(#import).*/ig,
replacement: function (match, p1, offset, string) {
return "/*/";
}
}
]}),
include: /node_modules\\onsenui.*/
}
]
This is my current webpack.production.config.js file:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src_react/app/app.jsx',
output: {
path: __dirname + '/build',
filename: '[name]-[hash].js'
},
module: {
loaders: [
{
test: [/\.jsx?$/, /\.js?$/],
exclude: /(node_modules|bower_components)/,
loader: 'babel'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style', 'css', 'resolve-url', 'sass?sourceMap'
)
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.scss'],
alias: {
'ie': 'component-ie'
}
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src_react/index.tmpl.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('[name]-[hash].css')
]
};
This does not work. The following is my webpack.config.js file used during development which seems to work fine:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src_react/app/app.jsx',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer: {
colors: true,
inline: true
},
module: {
loaders: [
{
test: [/\.jsx?$/, /\.js?$/],
exclude: /(node_modules|bower_components)/,
loader: 'babel'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.scss'],
alias: {
'ie': 'component-ie'
}
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/src_react/index.tmpl.html"
}),
new webpack.HotModuleReplacementPlugin()
],
watch: true
};
The main difference between the two files is that the production one attempts to use the ExtractTextPlugin but whenever I run the production config with the command webpack -p --config ./webpack.production.config.js
I get errors like the following:
ERROR in ./~/css-loader!./src_react/app/roles/components/job-button/JobButton.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../../sass/variables in /Users/Aaron/Documents/src_react/app/roles/components/job-button
# ./~/css-loader!./src_react/app/roles/components/job-button/JobButton.scss 3:10-99
Why does it try to look for my _variables.scss file inside the wrong folder? It works perfectly fine running the development config.
After following Juho's recommendation to change the way I use extract text plugin to ExtractTextPlugin.extract('style','css!resolve-url!sass?sourceMap') I get this error instead:
ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module build failed: ReferenceError: window is not defined