I'm trying to setup webpack in my react.js application based on this starter kit
When I start development server, application is build successfully and I can see a list of chunks generated, but then application doesn't load and I got an error in console indicating that chunks were not found.
My webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');
const SRC_DIR = path.join(__dirname, '/src');
const PUB_DIR = path.join(__dirname, '/public');
const DIST_DIR = path.join(__dirname, '/dist');
module.exports = {
entry: { main: `${SRC_DIR}/index.js` },
output: {
path: DIST_DIR,
chunkFilename: '[chunkhash].chunk.js',
},
resolve: {
alias: {
src: path.resolve(__dirname, 'src/')
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'source-map-loader'],
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
},
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
},
},
{ loader: 'sass-loader' }
]
}
],
},
optimization: {
splitChunks: {
cacheGroups: {
css: {
test: /\.(css|sass|scss)$/,
name: 'commons',
chunks: 'all',
minChunks: 2,
enforce: true,
},
},
},
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist'],
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
title: 'React-Redux-Webpack-Starter-Kit',
template: `${PUB_DIR}/index.html`,
filename: 'index.html',
favicon: `${PUB_DIR}/favicon.ico`,
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
},
}),
new WebpackMd5Hash(),
new Dotenv(),
],
devServer: {
port: 3003,
historyApiFallback: true,
},
};
My packate.json
{
"name": "FillRX",
"author": "Zoran Jeremic",
"email": "zoran.jeremic#gmail.com",
"licence": "UNLICENSED",
"version": "1.0.0",
"private": true,
"scripts": {
"lint": "eslint ./src",
"start": "webpack-dev-server --open --mode development --watch",
"prod": "webpack --mode production",
"build": "cross-env NODE_ENV=production && npm run prod",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"ie 11",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#date-io/core": "^2.5.0",
"#date-io/moment": "^1.3.13",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/list": "^4.4.0",
"#fullcalendar/react": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#fullcalendar/timeline": "^4.4.0",
"#material-ui/core": "^4.9.9",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.48",
"#material-ui/pickers": "^3.2.10",
"#material-ui/styles": "^4.9.6",
"#mdx-js/react": "^1.5.8",
"#react-pdf/renderer": "^1.6.8",
"#redux-saga/core": "^1.1.3",
"apexcharts": "^3.18.0",
"axios": "^0.19.2",
"axios-mock-adapter": "^1.17.0",
"babel-loader": "^8.1.0",
"change-case": "^4.1.1",
"chart.js": "^2.9.3",
"clsx": "^1.1.0",
"css-loader": "^4.2.1",
"dotenv-webpack": "^2.0.0",
"draft-js": "^0.11.5",
"formik": "^2.1.4",
"history": "^4.10.1",
"immer": "^6.0.3",
"immutable": "^4.0.0-rc.12",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"jss": "^10.1.1",
"jss-rtl": "^0.3.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.19",
"moment": "^2.24.0",
"nan": "^2.14.1",
"node-sass": "^4.14.1",
"notistack": "^0.9.9",
"nprogress": "^0.2.0",
"prismjs": "^1.20.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-apexcharts": "^1.3.7",
"react-app-polyfill": "^1.0.6",
"react-beautiful-dnd": "^13.0.0",
"react-big-calendar": "^0.24.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.4",
"react-dropzone": "^10.2.2",
"react-feather": "^2.0.3",
"react-helmet": "^5.2.1",
"react-markdown": "^4.3.1",
"react-modal-image": "^2.5.0",
"react-perfect-scrollbar": "^1.5.8",
"react-quill": "^1.3.5",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-form": "^8.3.2",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"sass-loader": "^9.0.3",
"socket.io-client": "^2.3.0",
"source-map-loader": "^1.0.1",
"uuid": "^7.0.3",
"webpack-dev-server": "^3.11.0",
"webpack-md5-hash": "^0.0.6",
"yup": "^0.28.3"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-mdx": "^1.6.8",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"html-webpack-plugin": "^4.3.0",
"mdx-loader": "^3.0.2",
"mini-css-extract-plugin": "^0.9.0",
"prettier": "^1.19.1",
"typescript": "^3.8.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
This is the error I'm getting in console:
All these chunks that are not found are generated during the application build, but I guess my configuration can't find it:
I didn't use webpack earlier so I'm not sure how to investigate this problem since error doesn't indicate what could be the problem, and google search gave me results indicating network problem which I don't think is the case here.
I would appreciate any help and suggestion.
The following configuration to the webpack should help :
{
path: DIST_DIR,
chunkFilename: "[chunkhash].chunk.js",
publicPath: "/",
}
Read more about this configutation here https://webpack.js.org/configuration/output/#outputpublicpath
Thanks
Related
I started working on a 5-years old python+react project. I had many problems regarding old packages or incompatibility. I managed to fix most of the problems that I faced except for this one:
ERROR in ./app/index.js
Module parse failed: /home/kaiz3n/Desktop/iris/iris-agent/app/index.js Unexpected token (37:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (37:6)
at Parser.pp$4.raise (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExprList (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/lib/Parser.js:902:15)
at NormalModule.<anonymous> (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack/lib/NormalModule.js:104:16)
at NormalModule.onModuleBuild (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/kaiz3n/Desktop/iris/iris-agent/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/kaiz3n/Desktop/iris/iris-agent/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/kaiz3n/Desktop/iris/iris-agent/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:75:3)
package.json
{
"name": "iris-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"babel": "babel",
"webpack": "webpack",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.2",
"react": "^15.0.2",
"react-ace": "^5.0.1",
"react-data-grid": "^2.0.33",
"react-dom": "^15.0.2",
"react-hot-loader": "^3.0.0-beta.2",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-router-redux": "^4.0.4",
"react-split-pane": "^0.1.63",
"react-syntax-highlighter": "^5.1.3",
"react-vega-lite": "^1.0.1",
"redux": "^3.5.2",
"vega": "^3.0.0-rc6",
"vega-lite": "^2.0.0-beta.11",
"webpack": "^1.14.0"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.8.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"electron": "^1.6.5",
"electron-packager": "^8.6.0",
"eslint": "^2.9.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^5.0.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.16.1",
"json-loader": "^0.5.4",
"node-sass": "^4.0.1",
"postcss-loader": "^0.9.1",
"react-addons-test-utils": "^15.0.2",
"redux-devtools": "^3.2.0",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
"stats-webpack-plugin": "^0.3.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
path.join(__dirname, 'app/index.js')
],
output: {
path: path.join(__dirname, 'dist/'),
filename: 'bundle.js',
publicPath: ''
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
//eslint: {
// configFile: '.eslintrc',
// failOnWarning: false,
//failOnError: false
//},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.json?$/,
loader: 'json'
},
{
test: /\.scss$/,
loader: 'style!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]'
},
{ test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, loader: 'file' }
]
}
};
I've been cleaning up my npm audit errors and after I was done I could not execute npm tun build anymore.
Error
ERROR in web/themes/custom/js/funds-chunk.js from Terser
Unexpected token: punc ()) [webpack://./node_modules/source-map-loader/dist/cjs.js!./frontend/js/shared/select2.countSelectionAdapter.js:18,0][web/themes/custom/js/funds-chunk.js:26214,4]
at ne (/node_modules/terser/dist/bundle.min.js:1:19592)
at c (/node_modules/terser/dist/bundle.min.js:1:28298)
at l (/node_modules/terser/dist/bundle.min.js:1:28389)
at f (/node_modules/terser/dist/bundle.min.js:1:28442)
at /node_modules/terser/dist/bundle.min.js:1:38167
at x (/node_modules/terser/dist/bundle.min.js:1:38198)
at O (/node_modules/terser/dist/bundle.min.js:1:34874)
at U (/node_modules/terser/dist/bundle.min.js:1:42405)
at me (/node_modules/terser/dist/bundle.min.js:1:48326)
at /terser/dist/bundle.min.js:1:49206
package.json
{
...
"scripts": {
"build": "webpack --config webpack.config.js --env production",
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#types/jquery": "^3.5.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^1.6.2",
"prettier": "2.8.1",
"sass": "1.32",
"sass-loader": "^9.0.2",
"scss-loader": "0.0.1",
"terser-webpack-plugin": "^3.0.6",
"ts-loader": "^8.0.18",
"typescript": "^4.2.3",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.0.8"
},
"dependencies": {
"#popperjs/core": "^2.9.2",
"#types/bootstrap": "^5.0.12",
"#types/googlemaps": "^3.43.3",
"#types/iframe-resizer": "^3.5.9",
"#types/js-cookie": "^3.0.0",
"#types/requirejs": "^2.1.32",
"autoprefixer": "^9.8.5",
"bootstrap": "^4.0.0",
"filemanager-webpack-plugin": "^8.0.0",
"fork-ts-checker-webpack-plugin": "^6.2.0",
"highcharts": "^9.3.3",
"highlight.js": "^10.1.1",
"iframe-resizer": "^3.5.5",
"jquery": "^3.5.1",
"jquery-quicksand": "^1.6.0",
"js-cookie": "^3.0.1",
"loader-utils": "^2.0.3",
"parsleyjs": "^2.9.2",
"popper.js": "^1.0.8",
"postcss-loader": "^3.0.0",
"query-string": "^7.0.1",
"select2": "^4.0.13",
"slick-carousel": "^1.8.1",
"source-map-loader": "^2.0.1",
"swiper": "^6.5.3 <6.8",
"tippy.js": "^6.2.6",
"webpack": "^5.30.0"
},
"overrides": {
"got": "12.1.0",
"semver-regex#<3.1.4": "3.1.4",
"semver-regex#>=4.0.0 <4.0.3": "4.0.3",
"trim-newlines": "4.0.1",
"minimist": "1.2.6",
"terser#<4.8.1": "4.8.1",
"terser#>=5.0.0 <5.14.2": "5.14.2",
"nth-check": "2.0.1",
"minimatch": "3.0.5"
}
}
webpack.config.prod.js
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'production',
devtool: 'source-map',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: false,
terserOptions: {
ecma: 5, // IE11
compress: true,
output: {
comments: false,
beautify: false
}
}
})
]
},
module: {
rules: [{
test: /images.*\.(jpg|jpeg|gif|png|svg|webp)$/i,
use: info => {
const theme = path.basename(info.issuer, path.extname(info.issuer));
return [{
loader: "file-loader",
options: {
outputPath: url => path.join('/web/themes/custom', theme, 'dist/images', url),
name: "[name].[ext]",
publicPath: '../images'
},
},
]
}
}]
}
};
I've looked into these:
https://github.com/webpack-contrib/terser-webpack-plugin/issues/114,
https://github.com/jantimon/html-webpack-plugin/issues/1262 but I do not use uglify or html-minifier.
https://github.com/webpack/webpack/issues/14662 updated webpack from 5.30.0 to version 5.75 did not help
Webpack 5 - "Unexpected token: punc (.)" after import axios adding mode: web didn't do a thing
I am getting TypeError: __webpack_require__.i(...) is not a function error when I am trying import FullCalendar from '#fullcalendar/react' on my project which is configured with webpack.
I tried manipulating webpack.config.dev.js but couldn't figure out how to implement it in a right way.
whenever I am trying to import any of the component from #fullcalendar it is throwing me the webpack error
webpack.config.dev.js:
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
import CopyWebpackPlugin from 'copy-webpack-plugin';
export default {
resolve: {
extensions: ['*', '.js', '.jsx', '.json']
},
devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
entry: [
// must be first entry to properly set public path
'babel-polyfill',
'./src/webpack-public-path',
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
// new CopyWebpackPlugin([ { from: './src/scripts', to: 'assets' } ]),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
// template: 'src/index.ejs',
// minify: {
// removeComments: true,
// collapseWhitespace: true
// },
// inject: true
// }),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
noInfo: true, // set to false to see a list of every file being bundled.
options: {
sassLoader: {
includePaths: [path.resolve(__dirname, 'src', 'scss')]
},
context: '/',
postcss: () => [autoprefixer],
}
})
],
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader' },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
{ test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
{ test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'] }
]
}
};
Package.json File:
{
"name": "MedFix",
"version": "1.0.0",
"description": "Project Tracking and Management",
"engines": {
"npm": ">=3"
},
"scripts": {
"start": "npm-run-all --parallel open:src",
"open:src": "babel-node tools/srcServer.js",
"test": "mocha -w tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"open:dist": "babel-node tools/distServer.js",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"build:html": "babel-node tools/buildHtml.js",
"prebuild": "npm-run-all clean-dist build:html",
"build": "babel-node tools/build.js && npm run open:dist",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
"author": "789",
"license": "123",
"dependencies": {
"#fullcalendar/bootstrap": "4.1.0",
"#fullcalendar/core": "4.1.0",
"#fullcalendar/daygrid": "4.1.0",
"#fullcalendar/interaction": "4.1.0",
"#fullcalendar/list": "4.1.0",
"#fullcalendar/react": "^4.1.0",
"#fullcalendar/timegrid": "4.1.0",
"#material-ui/core": "4.0.1",
"auth0-js": "7.6.1",
"auto-bind": "1.2.0",
"awesomplete": "1.1.2",
"axios": "0.16.2",
"babel-helper-bindify-decorators": "6.24.1",
"block-ui": "2.70.1",
"bootstrap-daterangepicker": "3.0.3",
"bootstrap-tagsinput": "0.7.1",
"cheerio": "1.0.0-rc.2",
"color": "2.0.0",
"copy-webpack-plugin": "4.0.1",
"country-currency-map": "1.0.9",
"country-data": "0.0.31",
"country-list": "2.1.0",
"currency-codes": "1.5.0",
"currency-symbol-map": "4.0.4",
"download-url-file": "0.0.2",
"downloadjs": "1.4.7",
"enzyme": "2.6.0",
"expect": "1.20.2",
"express": "4.15.3",
"fs": "0.0.1-security",
"fullcalendar": "3.10.0",
"geo-tz": "4.0.2",
"jquery": "3.2.1",
"jquery-validation": "1.16.0",
"jsdom": "11.1.0",
"mini-css-extract-plugin": "0.7.0",
"mocha": "3.4.2",
"mock-local-storage": "1.0.3",
"moment": "2.18.1",
"moment-timezone": "0.5.21",
"npm": "4.6.1",
"object-assign": "4.1.0",
"opentok-react": "0.7.0",
"path": "0.12.7",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-autobind": "1.0.6",
"react-autocomplete": "1.8.1",
"react-autosize-textarea": "0.4.8",
"react-autosuggest": "9.3.2",
"react-big-calendar": "0.14.0",
"react-block-ui": "1.1.1",
"react-bootstrap-daterangepicker": "3.4.0",
"react-bootstrap-datetimerangepicker": "2.0.4",
"react-bootstrap-table": "4.0.3",
"react-bootstrap-time-picker": "1.0.3",
"react-bootstrap-typeahead": "3.2.0",
"react-bootstrap-validation": "0.1.11",
"react-bootstrap-xeditable": "0.2.7",
"react-calendar": "2.14.0",
"react-checkbox-group": "4.0.1",
"react-ckeditor-component": "1.0.7",
"react-confirm-alert": "2.0.2",
"react-cookie-consent": "1.7.0",
"react-credit-card-input": "1.0.9",
"react-currency-input": "1.3.4",
"react-datepicker": "1.5.0",
"react-device-detect": "1.6.2",
"react-display-name": "0.2.4",
"react-dom": "15.4.1",
"react-dropzone": "4.2.7",
"react-edit-inline": "1.0.8",
"react-escape-html": "1.0.5",
"react-geocode": "0.1.2",
"react-google-autocomplete": "1.0.18",
"react-html-parser": "2.0.2",
"react-idle": "3.0.0",
"react-imask": "3.4.0",
"react-input-mask": "0.9.1",
"react-js-pagination": "3.0.2",
"react-ladda": "5.0.7",
"react-loadable": "5.3.1",
"react-loading": "2.0.2",
"react-maskedinput": "4.0.1",
"react-modal-bootstrap": "1.1.1",
"react-moment": "0.7.0",
"react-notification-system": "0.2.15",
"react-paginate": "5.0.0",
"react-pdf": "3.0.5",
"react-pull-to-refresh": "1.1.2",
"react-redux": "5.0.1",
"react-redux-toastr": "7.2.6",
"react-reorder": "3.0.0-alpha.6",
"react-responsive-modal": "2.0.1",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",
"react-rte": "0.11.0",
"react-scripts": "1.1.4",
"react-scrollable-anchor": "0.6.1",
"react-select": "1.0.0-rc.4",
"react-signature-pad-wrapper": "0.0.9",
"react-star-rating-component": "1.4.1",
"react-stripe-checkout": "2.6.3",
"react-switch": "3.0.4",
"react-tag-input": "5.0.2",
"react-tagsinput": "3.17.0",
"react-text-mask": "5.1.0",
"react-textarea-count": "1.0.3",
"react-times": "3.0.0",
"react-timezone": "2.1.0",
"react-toastify": "4.0.1",
"react-tooltip": "3.6.1",
"react-typeahead": "2.0.0-alpha.8",
"react-validation": "3.0.7",
"react-x-editable": "0.0.5-beta",
"reactstrap": "6.0.1",
"recharts": "1.0.1",
"redux": "3.6.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.1.0",
"sortablejs": "1.7.0",
"sweetalert": "1.1.3",
"text-mask-addons": "3.7.1",
"timezoner": "0.2.0",
"toastr": "2.1.2",
"video-react": "0.13.6"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.0.0-beta.51",
"#babel/preset-react": "^7.0.0-beta.51",
"autoprefixer": "6.5.4",
"babel-cli": "6.18.0",
"babel-core": "6.20.0",
"babel-loader": "6.2.10",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-polyfill": "6.20.0",
"babel-preset-env": "1.3.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.16.0",
"browser-sync": "2.18.5",
"chalk": "1.1.3",
"compression": "1.6.2",
"compression-webpack-plugin": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"css-loader": "0.26.1",
"datatables.net": "1.10.16",
"enzyme": "2.6.0",
"express": "4.15.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.24.1",
"identity-obj-proxy": "3.0.0",
"json-loader": "0.5.4",
"mockdate": "2.0.1",
"node-sass": "4.12.0",
"npm-run-all": "3.1.2",
"open": "0.0.5",
"opn-cli": "^3.1.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"postcss-loader": "1.2.1",
"prompt": "1.0.0",
"react-addons-test-utils": "15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-immutable-state-invariant": "1.2.4",
"redux-logger": "3.0.6",
"replace": "0.3.0",
"riek": "1.1.0",
"rimraf": "2.5.4",
"sass-loader": "6.0.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "2.2.1",
"webpack-bundle-analyzer": "2.1.1",
"webpack-cli": "^3.3.0",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.17.1"
},
"keywords": [],
"repository": {
"type": "git",
"url": ""
},
"babel": {
"presets": [
"react",
"stage-1"
],
"env": {
"development": {
"presets": [
"env",
"react-hmre"
]
},
"production": {
"presets": [
[
"env",
{
"es2015": {
"modules": false
}
}
]
],
"plugins": [
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
},
"test": {
"presets": [
"env"
]
}
}
}
}
I want to use webpack so that it will automatically compile any and all .scss files in my /src/app folder into a single .css file without me having to explicity point to all of the .scss files / import them.
I am trying to use ExtractTextPlugin to do this but it does not seem to be working. Do I need to provide a more specific entry point? Are my loaders not configured correctly? Or is there something else wrong? Thanks!
webpack.config.js:
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 = {
devtool: 'inline-source-map',
entry: [
"babel-polyfill",
SRC_DIR + "/app/index.js"
SRC_DIR + "/app/"
],
target: 'web',
output: {
path: DIST_DIR + "/app/",
filename: "bundle.js",
publicPath: "/app/"
},
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
}
},
plugins: [
new ExtractTextPlugin({filename: "foo.css", allChunks: true})
],
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'
},
]
},
};
module.exports = config;
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"watch": "webpack --progress --watch",
"start": "yarn build",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --inline --hot --history-api-fallback",
"build:dev": "webpack && cp src/index.html dist/index.html",
"build:prod": "webpack -p && cp src/index.html dist/index.html"
},
"author": "",
"license": "UNLICENSED",
"devDependencies": {
"babel-cli": "7.0.0-beta.3",
"babel-eslint": "7",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"eslint": "3.x",
"eslint-config-airbnb": "^15.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"extract-text-webpack-plugin": "^3.0.0",
"fetch-mock": "^6.0.0-beta.7",
"file-loader": "^0.11.2",
"image-webpack-loader": "^3.4.2",
"jest": "^23.1.0",
"jest-enzyme": "^4.0.0",
"jest-fetch-mock": "^1.6.4",
"node-sass": "^4.9.0",
"redux-mock-store": "^1.5.3",
"sass-loader": "^6.0.6",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"#trendmicro/react-toggle-switch": "^0.5.7",
"babel-polyfill": "^6.26.0",
"cross-fetch": "^1.1.1",
"font-awesome": "^4.7.0",
"highcharts": "^6.0.4",
"history": "^4.7.2",
"js-cookie": "^2.2.0",
"less-loader": "^4.0.5",
"libphonenumber-js": "^0.4.42",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"prop-types": "^15.6.0",
"query-string": "^5.0.1",
"rc-time-picker": "^3.1.0",
"react": "^16.0.0",
"react-animations": "^1.0.0",
"react-autosuggest": "^9.3.4",
"react-circular-progressbar": "^0.8.0",
"react-datepicker": "^0.59.0",
"react-dom": "^16.0.0",
"react-highcharts": "^15.0.0",
"react-list": "^0.8.8",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.6",
"react-select": "^1.0.0-rc.10",
"react-transition-group": "^1.2.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"styled-components": "3.2.3",
"twilio-client": "^1.4.33"
},
"jest": {
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
}
}
without me having to explicity point to all of the .scss files /
import them.
You can't do that, webpack is not like gulp or other task runner that you can just point patterns and it will apply transformations to them.
Webpack works with dependency graphs, and these graphs are going to start from your entry points. On each entrypoint it reads the dependencies and apply those loaders specified for each file extension. Webpack only knows the existence of that file, if it is imported in any file that is part of the dependency graph.
If you want to transform css the way that you described, i suggest you moving towards a more task runner library such as gulp.
I am trying to configure my application (https://github.com/freeCodeCamp/meeting-for-good) for testing. I am using jest. However, I get an error when I run my test. It looks like path to my AboutDialog component is failing to transpile.
zach#zach-VirtualBox:~/Documents/Code/fcc-for-good/meeting-for-good$ npm run test
> meeting-for-good#1.0.12 test /home/zach/Documents/Code/fcc-for-good/meeting-for-good
> cross-env NODE_ENV=test jest
FAIL __tests__/test.js
● Test suite failed to run
/home/zach/Documents/Code/fcc-for-good/meeting-for-good/client/components/AboutDialog/about-dialog.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.AboutDialog {
^
SyntaxError: Unexpected token .
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object.<anonymous> (client/components/AboutDialog/AboutDialog.js:7:20)
at Object.<anonymous> (__tests__/test.js:2:20)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 8.204s
Ran all test suites.
I am trying to import my AboutDialog component to my test.
import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import cssModules from 'react-css-modules';
import PropTypes from 'prop-types';
import styles from './about-dialog.css';
const inlineStyles = {
modal: { content: { width: '630px', maxWidth: '630px' }, bodyStyle: { paddingTop: 10, fontSize: '25px' } },
};
const AboutDialog = (props) => {
const { cbOpenModal, openModal } = props;
const actions = [
<FlatButton label="close" primary onTouchTap={() => cbOpenModal()} />,
];
return (
<Dialog
contentStyle={inlineStyles.modal.content}
bodyStyle={inlineStyles.modal.bodyStyle}
actions={actions}
modal
styleName="AboutDialog"
open={openModal}
>
<h1 styleName="titleStyle">Meeting for Good</h1>
<h6 styleName="versionStyle">Version {process.env.versionNumber}</h6>
<h4 styleName="descStyle">THE BEST MEETING COORDINATION APP</h4>
<h6>Created by campers from FreeCodeCamp</h6>
<h6> License and GitHub Repository</h6>
</Dialog>
);
};
AboutDialog.propTypes = {
cbOpenModal: PropTypes.func.isRequired,
openModal: PropTypes.bool.isRequired,
};
export default cssModules(AboutDialog, styles);
My test. If I remove the AboutDialog import from my test , the test suite runs.
import React from 'react';
import AboutDialog from '../client/components/AboutDialog/AboutDialog';
import { shallow } from 'enzyme';
describe('Test', () => {
it('should test', () => {
});
});
My .babelrc file.
{
"presets": ["react", "es2015", "stage-1"],
"plugins": [
"transform-decorators-legacy",
"react-hot-loader/babel",
["transform-runtime", { "polyfill": false, "regenerator": true }]
],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
My package.json
{
"name": "meeting-for-good",
"version": "1.0.12",
"description": "Schedule events with ease!",
"homepage": "https://github.com/FreeCodeCamp/meeting-for-good/#readme",
"main": "index.js",
"scripts": {
"clean": "rimraf build",
"build:server": "babel -d ./build ./server -s",
"build:client": "cross-env NODE_ENV=production babel-node ./tools/build.js",
"build": "npm run clean && npm run copy && npm run build:server && npm run build:client",
"start": " node ./build/app.js",
"copy": "node tools/copy.js",
"serve": "npm run clean && npm run copy && npm run build:server && npm run dev",
"dev": "cross-env NODE_ENV=development node -r dotenv/config ./build/app.js",
"test": "cross-env NODE_ENV=test jest",
"heroku-postbuild": "npm run build",
"postinstall": "node tools/postInstall.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/FreeCodeCamp/meeting-for-good"
},
"author": "Jean Philip de Rogatis <jrogatis#rogatis.eti.br>",
"contributors": [
{
"name": "Aniruddh Agarwal",
"email": "aaniruddh99#gmail.com"
},
{
"name": "Bob Sutton",
"email": "anischyros#gmail.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/FreeCodeCamp/meeting-for-good/issues"
},
"engines": {
"node": "^8.0.0",
"npm": "^5.0.0"
},
"dependencies": {
"autobind-decorator": "^2.1.0",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.2.1",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.22.0",
"babel-runtime": "^6.25.0",
"bluebird": "^3.5.0",
"body-parser": "^1.17.2",
"chai": "^4.1.0",
"chalk": "^2.0.1",
"chroma-js": "^1.3.3",
"chunk-manifest-webpack2-plugin": "^1.0.1",
"clipboard": "^1.6.1",
"compression": "^1.7.0",
"connect-flash": "^0.1.1",
"connect-mongo": "^1.3.2",
"cookie-parser": "^1.4.3",
"copy-webpack-plugin": "^4.0.1",
"cpy-cli": "^1.0.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.1",
"cssnano": "^3.10.0",
"dialog-polyfill": "^0.4.6",
"dotenv": "^4.0.0",
"ejs": "^2.5.5",
"email-templates": "^2.5.6",
"es6-promise": "^4.1.1",
"express": "^4.15.3",
"express-session": "^1.15.4",
"express-sessions": "^1.0.6",
"extract-text-webpack-plugin": "^2.1.0",
"fast-json-patch": "^2.0.4",
"favicons-webpack-plugin": "0.0.7",
"file-loader": "^0.11.1",
"google-calendar": "^1.3.2",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.29.0",
"image-webpack-loader": "^3.3.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"jstimezonedetect": "^1.0.6",
"lodash": "^4.17.2",
"material-ui": "^0.18.5",
"mocha": "^3.4.2",
"moment": "^2.18.1",
"moment-range": "^3.0.3",
"mongoose": "^4.11.3",
"morgan": "^1.8.2",
"nodemailer": "^4.0.1",
"nodemailer-ses-transport": "^1.5.0",
"nprogress": "^0.2.0",
"offline-plugin": "^4.8.3",
"opbeat": "^4.14.2",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"passport-google-oauth": "^1.0.0",
"passport-oauth2-refresh": "^1.0.0",
"pngquant-bin": "^3.1.1",
"prop-types": "^15.5.10",
"react": "^15.6.0",
"react-addons-update": "^15.5.2",
"react-css-modules": "^4.3.0",
"react-day-picker": "^5.5.1",
"react-dom": "^15.6.0",
"react-ga": "^2.2.0",
"react-hot-loader": "^3.0.0-beta.7",
"react-infinite": "^0.11.0",
"react-input-range": "^1.2.1",
"react-masonry-component": "^5.0.3",
"react-moment-proptypes": "^1.4.0",
"react-notification-system": "^0.2.14",
"react-router": "^3.0.2",
"react-tap-event-plugin": "^2.0.1",
"react-tooltip": "^3.3.0",
"react-transform-hmr": "^1.0.4",
"request": "^2.81.0",
"rimraf": "^2.6.1",
"shelljs": "^0.7.7",
"style-loader": "^0.18.1",
"url-loader": "^0.5.7",
"webpack": "^2.7.0",
"webpack-assets-manifest": "^0.7.0",
"webpack-bundle-analyzer": "^2.8.3",
"webpack-config": "^7.0.0",
"write-file-webpack-plugin": "^4.0.0",
"yargs": "^8.0.1"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"babel-preset-jest": "^20.0.3",
"enzyme": "^2.9.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.8.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.0",
"eslint-plugin-react": "^7.0.1",
"jest": "^20.0.4",
"jest-css-modules": "^1.1.0",
"react-dom": "^15.6.1",
"react-test-renderer": "^15.6.1",
"regenerator-runtime": "^0.10.5",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1",
"webpack-hot-middleware": "^2.18.2"
},
"jest": {
"transform": {
".*": "<rootDir>/node_modules/babel-jest"
}
}
}
My webpack config for development.
const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCSS = require('optimize-css-assets-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const WebpackAssetsManifest = require('webpack-assets-manifest');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const cssNano = require('cssnano');
const packageJSON = require('./package.json');
const noVisualization = process.env.ANALYSE_PACK.toString() === 'false';
const lintCode = process.env.LINT_CODE.toString() === 'false';
const VENDOR_LIBS = [
'autobind-decorator',
'bluebird',
'clipboard',
'chroma-js',
'es6-promise',
'fast-json-patch',
'immutable',
'isomorphic-fetch',
'jstimezonedetect',
'lodash',
'material-ui',
'moment',
'moment-range',
'nprogress',
'react',
'react-addons-update',
'react-day-picker',
'react-tap-event-plugin',
'react-dom',
'react-css-modules',
'react-infinite',
'react-input-range',
'react-masonry-component',
'react-notification-system',
'react-router',
];
module.exports = {
context: __dirname,
entry: {
bundle: [
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
'./client/main.js',
],
vendor: VENDOR_LIBS,
},
output: {
path: path.resolve('./build/client'),
publicPath: '/client/',
filename: '[name].[hash].js',
},
module: {
rules: [
(!lintCode ? {
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
},
} : {}),
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
use: 'file-loader',
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1000,
},
},
{
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 4,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
},
],
},
{
test: /\.css$/,
exclude: [/node_modules/, /no-css-modules/],
use: [{
loader: 'style-loader?sourceMap',
},
{
loader: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
},
],
},
{
test: /\.css$/,
include: [/node_modules/, /no-css-modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader?sourceMap',
use: 'css-loader',
}),
},
],
},
plugins: [
(!noVisualization ?
new BundleAnalyzerPlugin({
analyzerMode: 'static',
}) : null),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.GOOGLE_ANALYTICS_ID': JSON.stringify(process.env.GOOGLE_ANALYTICS_ID),
'process.env.GOOGLE_ANALYTICS_DEBUG': JSON.stringify(process.env.GOOGLE_ANALYTICS_DEBUG),
'process.env.versionNumber': JSON.stringify(packageJSON.version),
}),
new ExtractTextPlugin('vendor.css'),
new OptimizeCSS({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: cssNano,
cssProcessorOptions: {
discardComments: {
removeAll: true,
},
canPrint: true,
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.[hash].js',
minChunks: 'Infinity',
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new WriteFilePlugin({
test: /\.(html|ejs)$/,
}),
new FaviconsWebpackPlugin({
logo: './client/assets/favicons/logo.png',
icons: {
appleStartup: false,
},
background: 'transparent',
persistentCache: true,
inject: true,
}),
new HtmlWebpackPlugin({
title: 'Meeting for Good',
template: 'html-loader!./client/index.html',
filename: '../index.html',
inject: 'body',
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new WebpackAssetsManifest({
writeToDisk: true,
merge: true,
done(manifest) {
console.log(`The manifest has been written to ${manifest.getOutputPath()}`);
},
apply(manifest) {
manifest.set('manifest_version', '2');
manifest.set('start_url', '/?homescreen=1');
manifest.set('version', '1');
manifest.set('default_locale', 'en');
manifest.set('description', 'THE BEST MEETING COORDINATION APP');
manifest.set('display', 'fullscreen');
manifest.set('short_name', 'MeetingFG');
manifest.set('name', 'Meeting For Good');
manifest.set('background_color', '#FBFFFB');
manifest.set('theme_color', '#FBFFFB');
},
}),
].filter(p => p),
resolve: {
extensions: ['.js', '.css'],
},
devtool: 'source-map',
};
I figured it out. I just needed to use jest-css-modules (https://www.npmjs.com/package/jest-css-modules).
So I just have to add to make package.json
"jest": {
"transform": {
".*": "<rootDir>/node_modules/jest-css-modules"
}
}