I have this but it fails.
import React from 'react';
import '../../node_modules/materialize-css/sass/materialize.scss';
export default class App extends React.Component {
render() {
return (
<div class="card-panel teal lighten-2">
<h1> fad </h1>
</div>
)
}
}
Say's Module parse failed \fonts\roboto\roboto-bold.woff2 unexpected character ' ' (1:4)
my webpack.config.js
module.exports = {
devtool: 'inline-source-map',
entry: "./app/index.js",
output: {
path: __dirname + '/dist',
filename: "bundle.js"
},
devServer: {
contentBase: "./app",
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss/,
loaders: ["style", "css", "sass"]
}
]
}
}
Edit
SVG is not working
ERROR in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.3
Module parse failed:node_modules\font-awesome\fonts\fonta
esome-webfont.svg?v=4.6.3 Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
also I just noticed ttf and woff2 does not work as well
ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3
Module parse failed:node_modules\font-awesome\fonts\fontaw
esome-webfont.woff2?v=4.6.3 Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
My Loader
{
test: /\.(eot|ttf|woff2?|otf|svg)$/,
loaders: ['file']
}
I did fine this will work
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
}
but it is using url-loader not file-loader not sure what the difference is between the 2 loaders.
I believe you still need a separate loader for the font files.
Install file-loader and add this to your webpack.config.js:
{
test: /\.(eot|ttf|woff2?|otf)$/,
loaders: ['file']
}
Related
I am currently switching a web app to have its assets bundled using Webpack. Bundling JS and CSS was somewhat straightforward. Then came the turn of images. My question is how one can approach bundling images.
In particular, suppose I have static_src from which everything originates and static_compiled into which the bundled output is placed. I would like the image contents of static_src/img to move into static_compiled/img. How does one accomplish this?
On another note, is this a sensible approach or am I misunderstanding some philosophy behind Webpack and misusing it?
Current config is roughly like this:
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: { index: path.resolve(__dirname, "static_src", "index.js") },
output: {
path: path.resolve(__dirname, "static_compiled"),
publicPath: "/static/", // Should match Django STATIC_URL
filename: "[name].js", // No filename hashing, Django takes care of this
chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
rules: [
{
test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
{
test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"]},
{
test: /\.css$/, use: ["style-loader", "css-loader"]},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader'},
{
test: /\.svg$/,
loader: 'svg-inline-loader'},
/* {
test: /\.(ico|png|jpg|gif)$/,
loader: 'file-loader'} */
{
test: /\.(ico|png|svg|jpg|gif|jpe?g)$/,
use: [
{
options: {
name: "[name].[ext]",
outputPath: "img/"
},
loader: "file-loader"
}
]
}
],
},
resolve: {
alias: {
shared: path.resolve(__dirname, 'node_modules', 'bower_components')
},
extensions: ['.js', '.ts', 'jsx', 'tsx']
},
devServer: {
writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
}
}
The code I ended up using looks something like this.
plugins section:
plugins: [...
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, `static_src/img`),
to: 'img',
}
]
}),
module-rules section:
module: {
rules: [
{ ...
test: /\.(ico|png|jpg|gif|jpe?g)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "img/"
}
}
]
}
I have used angular builders and created custom webpack.config.js
I am trying to use webpack-rtl-plugin.
Following are my custom-webpack.config.js
module.export = {
entry: {
app: path.join(__dirname, './src/main.ts')
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src')
},
{
test: /\.scss$/,
// for dev we simply use the style-loader combined with
// the rtl-css loader
loaders: ['style-loader', 'rtl-css-loader']
}
]
}
};
But I am getting Following error
Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
What is the cause of this? Any alternate solutions?
I am following a react tutorial by Brian holt and i need to import .json file inside my react component like this :
code
When I try to build my project i was getting
ERROR in ./data.json
Module build failed: SyntaxError: Unexpected token, expected
like this:
Error caption in terminal
at first i thought that it was an eslint issue but it seems that it happens on the build step, i tried adding a json-loader to webpack but without any success.
Webpack Version:
2.6.1
Babel Core Version:
6.24.1
Babel Loader Version:
7.0.0,
this is my webpack config file :
const path = require('path')
module.exports = {
context: __dirname,
entry: './js/clientApp',
devtool: 'cheap-eval-source-map',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/assets/'
},
resolve: {
extensions: ['.js', '.jsx', ',json']
},
devServer: {
publicPath: '/public/',
port: 2110,
open: true,
historyApiFallback: true
},
stats: {
colors: true,
reasons: true,
chunks: true
},
module: {
rules: [
{
enforce: 'pre',
test: /\.jsx?/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.jsx?/,
loader: 'babel-loader'
}
]
}
}
and this is my .babelrc file :
{
"presets": [
"react", ["env", {
"targets": {
"browsers": "last 2 versions"
},
"loose": true,
"modules": false
}]
]
}
Any suggestions please ?
Regular Expression
The test property identifies which file or files should be transformed.
The problem is the regular expression on your rules:
{ test: /\.jsx?/ }
Your telling webpack to use babel-loader with any file extension starting with .js or .jsx
So as you can see .json match the test.
Solution
$ - matches anything until the end of the string
To fix this just replace ? with $, see the example below:
module: {
rules: [
{
test: /\.jsx$/,
loader: 'babel-loader'
}
]
}
I'm trying to use ES6 with webpack. Its okay for javascript module imports/exports, but I can't get raw-loader to work.
Here is what I am intending to do in my source file
import template from './template.html'
The template.html file has raw HTML in it.
module.exports = {
context: __dirname,
entry: [
'babel-polyfill',
'./app/app.js',
],
module: {
preLoaders: [
{
test: /\.js$/,
include: __dirname + '/app/',
loader: 'eslint-loader',
},
],
loaders: [
{
test: /\.js$/,
include: __dirname + '/app/',
loader: 'babel-loader?presets[]=es2015',
},
{
test: /\.html$/,
include: __dirname + '/app/',
loader: 'raw-loader',
},
],
},
output: {
path: './build/',
filename: 'app.js',
},
};
When I launch webpack, the code is generated as so:
module.exports = "module.exports = \" hello\\n <div>\\n <ul>\\n <li ng-repeat...
It should only be the "hello\n <div>..." string that should be exported.
Any help on this ? I really don't understand how to do this.
Import with raw-loader returns object with default property (import * as template from './file'). You can call it template.default to get what you want.
Here was the similar issue
And here you cant give a glance the way how you can update code of raw loader to use imported value as it is. Just have tinkered with this for a while
I just started pixi.js and it seems marvelous!
But I can't make it totally work with Gulp and WebPack...
On Chrome (Mac), everything work but on Safari (iPhone) i get this error: fs.readFileSync is not a function from function FXAAFilter.
I get the same error on desktop when I use forceFXAA: true.
My gulp scripts task :
gulp
.src(config.scripts.src)
.pipe(gulp_webpack({
node: {
fs: "empty"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(nodes_modules)/,
loader: "babel-loader",
query: {
presets: ["es2015"]
}
},
{
test: /\.json$/,
loader: "json"
}
],
postLoaders: [
{
include: path.resolve(__dirname, "nodes_modules/pixi.js"),
loader: "transform?brfs"
}
]
},
}))
.pipe(gulp_concat(config.scripts.out))
.pipe(gulp.dest(config.scripts.dst));
This is because webpack includes the actual file operation (that should be run at compile time) that is used to include WebGL frag files into the JS bundle. My guess is that you only see the error on environments where PIXI uses the GL renderer.
Try npm install transform-loader brfs --save and add the following to your config:
module.exports = {
context: __dirname,
entry: "./index.js",
module: {
loaders: [
{
test: /\.js$/,
loader: "transform?brfs"
}
]
}
}
Source: https://github.com/webpack/transform-loader