Nothing seems to work to get webpack to recognize the spread operator.
I've also tried adding the 7.0.0-beta's for babel-core and object-rest-spread.
When I run, I get the message I need an appropriate loader to handle the file type. With an unexpected token on the place of the spread-operator. (see img)
This is my .babelrc:
{
"plugins": [
"syntax-dynamic-import",
"transform-async-to-generator",
"transform-es2015-destructuring",
"transform-es2015-parameters",
"transform-object-rest-spread",
["react-intl", {
"messagesDir": "./translations/messages/"
}]],
"presets": ["es2015", "react", "stage-0"]
}
This is my webpack.config.js:
require('babel-polyfill');
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: [
'./src/index'
],
module: {
loaders: [
{test: /\.jsx$/, loader: 'babel-loader', /*...*/},
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' },
{ test: /\.(svg|png|wav)$/, loader: 'file-loader'},
{ test: /\.css$/, loader: 'style-loader!css-loader'},
{ test: /\.(eot|woff|woff2|ttf)$/, loader: 'url-loader?limit=100000'},
],
},
resolve: {
extensions: ['.js', '.jsx', '.scss']
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
This is my package.json:
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.0",
"babel-plugin-react-intl": "^2.2.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"es6-object-assign": "1.1.0",
The file where the error occurs:
const initialState = {
sprites: {},
stage: {}
};
const reducer = function (state, action) {
if (typeof state === 'undefined') state = initialState;
switch (action.type) {
case UPDATE_TARGET_LIST:
return Object.assign({}, state, {
sprites: action.targets
.filter(target => !target.isStage)
.reduce(
(targets, target, listId) => Object.assign(
targets,
//error message spread operator not handled
{[target.id]: {order: listId, ***...target***}}
),
{}
),
stage: action.targets
.filter(target => target.isStage)[0] || {}
});
case UPDATE_EDITING_TARGET:
return Object.assign({}, state, {editingTarget: action.target});
default:
return state;
}
};
Related
I'm using mini-css-extract-plugin in my webpack, version 1.3.6 but when trying to run dev build getting the below error. css and scss both are in the app.
ERROR in ./src/index.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. { plugins: [new MiniCssExtractPlugin()] }), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = ({ mode } = { mode: "production" }) => {
console.log(`mode is: ${mode}`);
return {
mode,
entry: "./src/index.tsx",
output: {
publicPath: "/",
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx", ".css", ".scss", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: "image-webpack-loader",
},
"url-loader?limit=100000",
],
// type: 'asset/inline'
},
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
},
],
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css",
outputPath: "css",
esModule: false,
},
},
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: { auto: true },
},
},
{
loader: "sass-loader",
options: {
webpackImporter: true,
},
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.(ts|tsx)$/,
use: [
{
loader: "ts-loader",
options: {
transpileOnly: true,
},
},
],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
favicon: "./public/favicon.ico",
}),
new MiniCssExtractPlugin({
linkType: "text/css",
}),
],
devServer: {
open: true,
},
};
};
package.json
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel": "^6.23.0",
"babel-loader": "^8.1.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"css-loader": "^5.2.7",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.0.0",
"image-webpack-loader": "^8.1.0",
"mini-css-extract-plugin": "^1.3.6",
"node-sass": "6.0.1",
"postcss-loader": "^6.2.1",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.2.0",
"url-loader": "^4.1.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^3.11.1"
}
Developing a wordpress site and using webpack to bundle assets.
I have a setup where I'm compiling SCSS to CSS among other things. I want to minify the output CSS and remove comments. I tried to add optimize-css-assets-webpack-plugin and configure it as example suggests, but it doesn't work (no errors)...
So how can I modify this webpack config so that output is (1) stripped of comments and (2) minified?
webpack.config.js:
const path = require("path");
const config = require('./config.js');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'production',
entry: ["./src/app.js", "./src/scss/style.scss"],
output: {
path: path.resolve(__dirname, "wp-content/themes/ezdigital"),
filename: "js/[name].js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
{
loader: "extract-loader"
},
{
loader: "css-loader?-url"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
//remove comments from JS files
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
},
}),
],
},
plugins: [
new BrowserSyncPlugin( {
proxy: config.url,
files: [
'**/*.php'
],
reloadDelay: 0
}
)
]
};
additional postss.config.js:
module.exports = {
plugins: {
'autoprefixer': {}
}
}
Package.json:
{
"name": "EZTheme",
"version": "1.0.0",
"description": "EZ Theme",
"main": "index.js",
"scripts": {
"test": "test",
"build": "webpack",
"start": "webpack --watch",
"serve": "webpack-dev-server --open"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": ""
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.6.3",
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^1.0.1",
"exports-loader": "^0.7.0",
"extract-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-alpha.0",
"file-loader": "^2.0.0",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"popper.js": "^1.14.6",
"postcss-cli": "^6.0.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"bootstrap": "^4.1.3"
}
}
It turns out the problem was that I was trying to use extract-text-webpack-plugin which does not work with webpack 4.
Instead, I switched to mini-css-extract-plugin along with optimize-css-assets-webpack-plugin.
My new webpack.config.js file:
const path = require("path");
const config = require('./config.js');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'production',
entry: ["./src/app.js", "./src/scss/style.scss"],
output: {
path: path.resolve(__dirname, "wp-content/themes/ezdigital"),
filename: "js/[name].js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
{
loader: "extract-loader"
},
{
loader: "css-loader?-url"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
//remove comments from JS files
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
}
})
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new BrowserSyncPlugin( {
proxy: config.url,
files: [
'**/*.php'
],
reloadDelay: 0
}
)
]
};
This is my package.json
{
"name": "login-ts-react",
"version": "1.0.0",
"main": "webpack.config.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server"
},
"dependencies": {
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2"
},
"devDependencies": {
"style-loader": "^0.21.0",
"mini-css-extract-plugin": "^0.4.0",
"#types/react": "^16.3.11",
"#types/react-bootstrap": "^0.32.8",
"#types/react-dom": "^16.0.5",
"awesome-typescript-loader": "^5.0.0-1",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"import-glob-loader": "^1.1.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.4",
"raw-loader": "^0.5.1",
"sass-loader": "^7.0.1",
"source-map-loader": "^0.2.3",
"typescript": "^2.8.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-env": "^0.8.0"
}
}
And this is my webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
entry: './src/index.tsx',
mode: 'development',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
},
{
enforce: 'pre',
test: '/\.jsx?$/',
loader: 'source-map-loader'
},
{
test: /\.s?[ac]ss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
})
],
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss']
}
}
My understanding is that when I run my application and access is from the browser, I should see a bundle.js and a bundle.css.
When I run my application and see the network tab of chrome develop tools, I see bundle.js but there is no bundle.css.
I have the following SCSS file in my project
$header-img: image-url('../images/image.gif', false, false);
.bg {
background-image: $header-img;
width: 100%;
height: 100vh;
}
Why is webpack not emitting any CSS file for me?
Edit:: Based on suggestion below I added the line to my index.tsx file
require('../styles/style')
Now there are no errors. but still no *.css file in the network output.
Did you make sure to import your main .scss file in your ./src/index.tsx?
e.g:
require('./main.scss');
I kept trying multiple permutation combinations, and finally this webpack.config.js worked for me. With this webpack config, I am able to see main.css in the browser network tab.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
entry: './src/index.tsx',
mode: 'development',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
},
{
enforce: 'pre',
test: '/\.jsx?$/',
loader: 'source-map-loader'
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: ["styles/"]
}
},
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss']
}
}
I've written the webpackconfig but css doesn't seem to work properly and it is throwing and error. Following are my file's contains.
My webpack.config.js:
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
plugins: [
new ExtractTextPlugin("style.css", {
allChunks: true
})
]
};
and in my Index.js I've added as :
import '../assets/css/style.css';
Package.json :
{
...
"dependencies": {...
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3",
"css-loader": "^0.28.7",
"style-loader": "^0.19.0"
}
}
As per our chat, this is what your webpack.config.js file is as below:
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}
{
test: /\.css$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("css-loader!sass-loader")
}
]
},
plugins: [
new ExtractTextPlugin("src/components/assets/css/style.css", {
allChunks: true
})
]
};
module.exports = config;
There are two issues with this config.
The are no commas separating the loaders objects.
You are using ExtractTextPlugin but have not imported/required it anywhere in the config.
Issue #1 is quite obvious how to solve; simply add the commas after each definition of a loader object.
Issue #2 as well, you need to install and reference ExtractTextPlugin in you webpack config file.
You can do so by running the following command in your terminal:
npm install --save-dev extract-text-webpack-plugin
This will install the plugin to your node_modules and also list it in your package.json file under thedevDependencies` object.
And then in your webpack.config.js where you are requiring modules, also require the plugin like so:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
After making these changes, you config file should look something like this:
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
},
{
test: /\.css$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("css-loader!sass-loader")
}
]
},
plugins: [
new ExtractTextPlugin("src/components/assets/css/style.css", {
allChunks: true
})
]
};
module.exports = config;
I have this modules in package.json
{
"name": "v1.0",
"version": "1.0.0",
"description": "",
"main": "app-main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
`
My js bundle is working, but styles i cant compiling to 1 bundle for ex. main.bundle.css. This is my webpack.config.js
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app-main' : './assets/js/app-main.js',
'vendor-main': './assets/js/vendor-main.js'
},
output: {
path: path.resolve(__dirname, './js'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["css/scss/main.scss"]
}
}]
}],
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].bundle.css',
allChunks: true,
}),
]
};
When i start webpack, i dont have any errors, my js bundle is working, but css not. How i can fix this problem?
You are missing the call to extract function in your loader rules:
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app-main': './assets/js/app-main.js',
'vendor-main': './assets/js/vendor-main.js'
},
output: {
path: path.resolve(__dirname, './js'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["css/scss/main.scss"]
}
}]
})
}],
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].bundle.css',
allChunks: true,
}),
]
};
One more thing do not forget to require your .scss file in your .js file.