I'm working on a making my own boilerplate for React using Webpack4 and have run the issue of my css file being bundled and not rendering specific custom styles. As you can see I am using the sass-loader compile all my .sass/scss files together and postcss-loader to autoprefixing, css-loader to load the compiled css files, MiniCssExtractPlugin.loader extracts CSS into separate files, and finally style-loader to inject my css. It does all this correctly buy doesn't seem to actually apply the styles. Could anybody explain why this occurs?
The repo can be found
here
webpack.config.js
/* Required Packages */
const webpack = require('webpack')
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
//entry to bundled js file
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js' //output filename
},
//want to use the src/index.js file as entry point to bundle all of its imported files
module:{
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader'],
exclude: ["node_modules"]
}
]
},
//webpack server hot module replacement
plugins: [
new CleanWebpackPlugin('dist', {}),
new MiniCssExtractPlugin({
filename: 'style.[hash].css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash(),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['*', '.js', '.jsx'] //array of extensions to compile js
},
devServer: {
contentBase: './dist',
hot: true
}
}
package.json
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --config ./webpack.config.js --open --hot --history-api-fallback"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Nickadiemus/ns-react-boilerplate.git"
},
"author": "Nick Sladic",
"license": "MIT",
"bugs": {
"url": "https://github.com/Nickadiemus/ns-react-boilerplate/issues"
},
"homepage": "https://github.com/Nickadiemus/ns-react-boilerplate#readme",
"devDependencies": {
"autoprefixer": "^8.6.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"react-hot-loader": "^4.3.3",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1"
}
}
Use either 'style-loader' or MiniCssExtractPlugin.loader, not both:
const devMode = process.env.NODE_ENV !== 'production';
...
{
test: /\.scss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
exclude: ["node_modules"]
}
Source: mini-css-extract-plugin docs
Related
I am trying to update Webpack to a newer versions (by removing node_modules then running yarn), but I am not able to solve all the config errors shown below.
So far in the Webpack config, I have changed query to options, and loaders to rules. In package.json, I have replaced --colors with --color.
Original webpack.config.js [Source]:
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
entry: {
background: path.join(__dirname, './src/background'),
entry: path.join(__dirname, './src/entry'),
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/manifest.json' },
{ from: 'images/**/*' }
]),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
],
resolve: {
extensions: ['.js']
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
exclude: /node_modules/
}]
}
}
Current webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
entry: {
background: path.join(__dirname, "./src/background"),
entry: path.join(__dirname, "./src/entry"),
},
output: {
path: path.join(__dirname, "./dist"),
filename: "[name].js",
},
plugins: [
new CopyWebpackPlugin([
{ from: "src/manifest.json" },
{ from: "images/**/*" },
]),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
},
}),
],
resolve: {
extensions: [".js"],
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["react", "es2015", "stage-0"],
},
exclude: /node_modules/,
},
],
},
};
Still many of the following errors...
ERROR in ./src/background.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (/home/gameveloster/sidebar/node_modules/babel-loader/lib/index.js:103:36)
but there's no babel in the files stated in the errors, like ./src/background.js.
What is the correct way to fix this issue? Thanks!
package.json:
{
"name": "sidebar",
"private": true,
"version": "0.1.0",
"main": "dist/entry.js",
"license": "UNLICENSED",
"scripts": {
"build": "webpack --progress --profile --color",
"watch": "webpack --watch --progress --color",
"dev": "npm run watch"
},
"dependencies": {
"chrome-sidebar": "file:../chrome-sidebar",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "6.24.0",
"babel-eslint": "^7.2.3",
"babel-generator": "6.24.0",
"babel-loader": "6.4.1",
"babel-plugin-module-resolver": "2.6.2",
"babel-plugin-react-require": "3.0.0",
"babel-plugin-transform-class-properties": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.24.0",
"babel-plugin-transform-object-rest-spread": "6.22.0",
"babel-plugin-transform-react-jsx-source": "6.22.0",
"babel-plugin-transform-react-remove-prop-types": "0.3.3",
"babel-plugin-transform-runtime": "6.22.0",
"babel-preset-env": "^1.4.0",
"babel-preset-latest": "6.24.0",
"babel-preset-node6-es6": "^11.2.5",
"babel-preset-react": "6.23.0",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "6.23.0",
"copy-webpack-plugin": "^4.0.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}
For 3 days straight I am having a trouble to setup Webpack for staging purposes.
The goal is to rewrite url of assets in final .css file (frontend.css) like this:
Let's say that in .scss file I have:
background: url('/assets/image.png') (this works for dev and prod)
and in final outputted .css file for staging, I want it to be:
background: url('https://stage.domain.com/staging/project-name/assets/image.png')
I have script npm run stage, that build js. and .css only for staging puposes.
It creates stage dir on root with two files frontened-bundle.js and frontend.css. (see bottom of "Files structure" screenshot).
I tried to rewrite url with resolve-url-loader with root parameter, but I cant get it working.
publicPath is also ignored.
I am not sure what I am doing wrong.
Please point me in right direction.
Files structure:
webpack.stage.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const public_path = 'https://stage.domain.com/staging/project-name/'
module.exports = {
context: __dirname,
entry: {
frontend: [
'./src/js/index.js',
'./src/scss/main.scss'
],
// customizer: './src/customizer.js'
},
resolve: {
extensions: ['.ts', '.js', '.jsx', '.scss', '...',],
},
output: {
path: path.resolve(__dirname, 'stage'),
publicPath: public_path,
filename: '[name]-bundle.js'
},
mode: 'production',
// devtool: 'cheap-eval-source-map',
module: {
rules: [
{
enforce: 'pre',
exclude: /node_modules/,
test: /\.jsx$/,
loader: 'eslint-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: public_path,
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
url: false,
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
options: {
// root: path.join(__dirname, './'), // returns url("../../assets/assets/fonts/NewYork.woff2")
// root: '/', // returns url('../../../../../../assets/fonts/NewYork.woff2')
// root: './', // returns url('../../assets/fonts/NewYork.woff2')
attempts: 1,
debug: true,
sourceMap: true,
publicPath: public_path,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
},
{
test: /\.(ttf|woff|woff2|eot|jpe?g|png|svg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
// outputPath: '../',
publicPath: publicPath,
},
},
'img-loader',
'url-loader',
]
}
]
},
plugins: [
// new StyleLintPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
],
optimization: {
// minimizer: [new UglifyJsPlugin(), new OptimizeCssAssetsPlugin()]
}
};
package.json
{
"name": "project_name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack --watch",
"stage": "npm run clean && webpack --config webpack.stage.js -p --progress --profile",
"clean": "rm -rf stage"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"webpack"
],
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"#babel/cli": "^7.14.5",
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"autoprefixer": "^9.6.4",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"browser-sync": "^2.27.4",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^3.2.0",
"css-mqpacker": "^7.0.0",
"eslint": "^6.5.1",
"eslint-config-prettier": "^6.4.0",
"eslint-config-wordpress": "^2.0.0",
"eslint-loader": "^3.0.2",
"eslint-plugin-prettier": "^3.1.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.2.0",
"img-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"prettier": "^1.18.2",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"stylelint": "^11.0.0",
"stylelint-config-recommended-scss": "^4.0.0",
"stylelint-config-wordpress": "^15.0.0",
"stylelint-order": "^3.1.1",
"stylelint-scss": "^3.11.1",
"stylelint-webpack-plugin": "^1.0.1",
"svg-sprite-loader": "^4.1.6",
"svgo": "^1.3.0",
"svgo-loader": "^2.2.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"wp-pot-cli": "^1.5.0"
},
"dependencies": {
"#babel/polyfill": "^7.6.0",
"imagemin": "^8.0.0",
"jquery": "^3.6.0"
}
}
I've had this similar issue in the past, I tried the below from the docs,
const ASSET_PATH = process.env.ASSET_PATH || '/';
export default {
output: {
publicPath: ASSET_PATH,
},
plugins: [
// This makes it possible for us to safely use env vars on our code
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
}),
],
};
But actually, the one that worked perfectly for my issue is below, while the public path was the CDN link from where the assets were served
require('dotenv').config();
__webpack_public_path__ = config.publicPath // publicPath is process.env.ASSET_PATH || '/';
When you set the publicPath as "../" did you also try the useRelativePaths: true?
Ref:- https://github.com/webpack-contrib/file-loader#userelativepath
I created react app with by initializing webpack with npm init -y and then modified scripts and webpack config file manually. My file's contents are as below:
package.json
{
"name": "arw.ecahangirov",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"uglifyjs-webpack-plugin": "^2.2.0",
"weak-key": "^1.0.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"axios": "^0.19.0",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.24.0",
"style-loader": "^1.0.0"
}
}
webpack.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".jsx", ".css"]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\.js$/
})
]
}
};
Problem is that, when I run npm run build, webpack does not minify main.js file which is output. It results with 716kb file size and by opening output file I observe that file is multilined and also contains comments. Why webpack does not care of minifiying in this case, although I started it with --mode production?
You have to specify a minifier for css.
Load this at top of your webpack config file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
To the rules block:
rules: [
//...
{
test: /\.(sa|sc|c)ss$/,
use: [{loader: MiniCssExtractPlugin.loader},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
//...
]
To the optimization block:
optimization: {
minimizer: new OptimizeCSSAssetsPlugin({})
}
To the plugins block:
plugins: [
//...
new MiniCssExtractPlugin({
filename: [name].[hash].css',
chunkFilename: '[id].[hash].css',
}),
//...
]
You will need to load that plugins first
npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
You can find a working config here
I would like to generate source maps for our production build with Webpack. I managed to generate it, but when I stop on a breakpoint in the debugger, variables are not resolved:
What am I doing wrong? How can I generate a source map that lets the chrome devtools resolve the variables once I stopped on a breakpoint in the debugger?
These are my webpack configurations:
webpack.config.js:
const path = require('path');
const ROOT = path.resolve( __dirname, 'src/main/resources/packedbundle' );
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: ROOT,
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'eslint-loader',
options: {
failOnError: true,
quiet: true
}
}
],
enforce: 'pre'
},
{
test: /\.ts$/,
exclude: [ /node_modules/ ],
use: [
'ng-annotate-loader',
'awesome-typescript-loader'
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: '../'
}),
},
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
{
test: /\.(svg|woff|woff2|eot|ttf)$/,
use: 'file-loader?outputPath=fonts/'
},
{
test: /.html$/,
exclude: /index.html$/,
use: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'AngularJS - Webpack',
template: 'index.html',
inject: true
}),
new LoaderOptionsPlugin({
debug: true
}),
new ExtractTextPlugin('css/style.css')
],
entry: './index.ts'
};
webpack-prd.config.js:
const path = require('path');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.config.js');
const DESTINATION = path.resolve( __dirname, 'dist/packedbundle' );
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = webpackMerge(commonConfig, {
devtool: 'module-source-map',
mode: 'production',
output: {
path: DESTINATION,
filename: 'js/[name]-bundle-[chunkhash].js'
},
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: true
})
]
}
});
package.json:
{
"name": "com.avon.maps.packedbundle.webcontent",
"version": "1.0.0",
"description": "Packed bundle creation screen frontend",
"main": "index.js",
"scripts": {
"prestart": "rimraf dist",
"start": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-dev.config.js",
"prebuild": "rimraf dist",
"build": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-prd.config.js",
"test": "mocha -r ts-node/register -r ignore-styles -r jsdom-global/register __tests__/**/*.spec.ts"
},
"author": "BlackBelt",
"private": true,
"engines": {
"node": "11.10.0"
},
"devDependencies": {
"#types/angular": "1.6.51",
"#types/angular-loading-bar": "0.0.35",
"#types/chai": "4.1.7",
"#types/core-js": "2.5.0",
"#types/jquery": "3.3.29",
"#types/kendo-ui": "2019.1.1",
"#types/mocha": "5.2.6",
"#types/node": "10.12.0",
"#types/underscore": "1.8.13",
"#types/webpack-env": "1.13.6",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"acorn": "6.1.1",
"awesome-typescript-loader": "5.2.1",
"chai": "4.2.0",
"check-node-version": "3.2.0",
"css-loader": "1.0.0",
"eslint": "5.16.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-loader": "2.1.2",
"eslint-plugin-import": "2.16.0",
"extract-text-webpack-plugin": "v4.0.0-beta.0",
"file-loader": "2.0.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"ignore-styles": "5.0.1",
"istanbul-instrumenter-loader": "3.0.1",
"jsdom": "14.0.0",
"jsdom-global": "3.0.2",
"mocha": "6.1.2",
"ng-annotate-loader": "0.6.1",
"node-sass": "4.11.0",
"rimraf": "2.6.2",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"ts-node": "8.0.3",
"typescript": "3.4.2",
"uglifyjs-webpack-plugin": "2.0.1",
"webpack": "4.23.1",
"webpack-cli": "3.1.2",
"webpack-merge": "4.1.4"
},
"dependencies": {
"angular": "1.7.5",
"core-js": "3.0.1",
"growl": "1.10.5",
"jquery": "3.3.1",
"underscore": "1.9.1"
}
}
I cannot share the source code, but I used this angularjs webpack starter project to start mine.
Issues with invalid sourcemaps in Webpack and terser-webpack-plugin are addressed starting with webpack 4.39.2 and terser-webpack-plugin 1.4.0.
v4.39.0 release log:
webpack-sources + terser-webpack-plugin comes with quality optimizations for SourceMaps
There was an additional issue, whose fix was published later. It was included for webpack-sources v1.4.2/webpack 4.39.2. In conclusion 4.39.2or latest version is the one to go.
Details
Sourcemaps in production mode seem to work as expected in most cases now. Unfortunately, if you have non trivial code transformations like inlining of functions (that exist in source code, but are dissolved from webpack) in the course of uglyfying/minification/optimization, breakpoints sometimes still don't get mapped well. Part of the reason is, that the sourcemap spec is vague concerning those aspects.
Not sure why I'm getting this error as webpack is setup the same as an older project.
ERROR in ./app/static/imgs/sketch.svg
Module parse failed: /Users/leongaban/projects/personal/CoinHover/coinhover.io/app/static/imgs/sketch.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" encoding="UTF-8"?>
| <svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
| <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
# ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./app/coinhover.scss 6:13780-13815
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The _svg.scss file:
.close-x {
position: relative;
background-size: 400px 400px;
background-image: url('static/imgs/sketch.svg'), none;
}
.close-x {
width: 30px;
height: 30px;
background-position: -41px -2px;
cursor: pointer;
}
package.json
{
"name": "coinhover",
"version": "0.0.2",
"main": "index.js",
"author": "Leon Gaban",
"license": "MIT",
"scripts": {
"start": "webpack && webpack-dev-server",
"dev": "webpack-dev-server",
"build": "webpack -p",
"production": "webpack -p",
"test": "eslint app && jest",
"test:fix": "eslint --fix app"
},
"now": {
"name": "coinhover",
"engines": {
"node": "7.4.x"
},
"alias": "coinhover.io"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"dependencies": {
"axios": "^0.16.2",
"babel-runtime": "^6.23.0",
"chalk": "^2.1.0",
"prop-types": "^15.5.10",
"ramda": "^0.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1",
"react-redux": "^5.0.5",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"svg-loader": "^0.0.2"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"enzyme": "^2.9.1",
"enzyme-to-json": "^1.5.1",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"jest": "^20.0.4",
"node-sass": "^4.5.3",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"
}
}
webpack
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';
const coinhover = path.resolve(__dirname, 'coinhover');
const app = path.resolve(__dirname, 'app');
const log = console.log;
// https://gist.github.com/leongaban/dc92204454b3513e511645af98107775
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/app/index.html`,
filename: 'index.html',
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'coinhover.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: 'app/static', to: 'static' }]);
const PATHS = {
app,
build: coinhover
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: coinhover
})
}
],
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
loader: 'url-loader?limit=100000'
}
]
},
resolve: { modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'] }
// resolve: {
// modules: ['node_modules', path.resolve(__dirname, '/app')]
// }
};
const developmentConfig = {
devServer: {
publicPath: '',
contentBase: path.join(__dirname, 'dist'),
quiet: true,
inline: true,
compress: true,
stats: 'errors-only',
open: true
},
devtool: 'cheap-module-inline-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: 'cheap-module-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`);
export default Object.assign({}, base,
isProduction === true ? productionConfig : developmentConfig
);
I do not know if its equivocal in the version of Webpack you are using (I've been using 1.15.0), but Webpack has issues parsing certain <xml> tags and within the <svg> element there are sometimes xmls/xmlns attributes that Webpack has problems parsing. These are generally erroneous verbose leftovers from Illustrator or other SVG generating applications. I had a very similar if not identical error where Webpack prompted for a loader in the error screen.
I bet if you strip your "sketch.svg" document of the <xml> tag wrapper and possibly the xmlns attributes as well Webpack will compile successfully.
(Boo to the users who gripe about stackoverflow best practices and do not even attempt to help.)