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
Related
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 very new to Webpack and I'm not certain how to handle LESS. I want to have many LESS files and I want them to compile into one CSS file after I run npm run build. This would result in a style.css file which includes everything.
My webpack.config.js looks like this:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules:
[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [{
loader: "style-loader", // creates style nodes from JS strings
path: path.resolve(__dirname, 'src')
}, {
loader: "css-loader", // translates CSS into CommonJS
path: path.resolve(__dirname, 'src')
}]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
plugins: [new HtmlWebpackPlugin()]
};
How exactly do I configure webpack to make it combine all LESS files into one CSS file?
You can use a plugin called extract-text-webpack-plugin to achieve this. According to their documentation, this plugin moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css). Now of course, in your case, you will first have to parse your .less files to .css and then bundle them up into a single file.
You can modify your webpack config like so:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({ <---- Use the plugin here to extract the styles
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin(),
new ExtractTextPlugin("styles.css"),
]};
You can use extract-text-webpack-plugin to make one css file. But only do this for a production build not while you are developing.
I would look at using the Webpack less-loader. It covers a production build here
I am trying to get cache busting in my gulp file output to work. Currently it outputs a file like this: main.2d06434c1c57525870ac-e7615836.js but whenever I modify typescript files and rebuild the hash in the file name output is always the same.
I have tried the built in webpack hashing and the gulp vinyl-named hashing to see if there was something wrong with one of their configurations but again their output filename is the same on each rebuild.
Here is the related part of my builder task. Thanks!
var packer = gulp.src(['./src/basePolyfills.ts', './src/external.ts', './src/main.ts'])
.pipe(named())
.pipe(webpack({
output: { filename: '[name].[hash].js' },
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts' },
{ test: /\.html$/, loader: 'html' }
]
},
resolve: { extensions: ['', '.js', '.ts'] }
}))
.pipe(hash())
.pipe(gulp.dest('./wwwroot/js/'));
Where is your hash() coming from? As far as I know, webpack automatically calculates chunkhashes. Be aware that there is a difference between "hash" and "chunkhash". chunkhash is a hash per chunk, whereas "hash" seems to be a hash over all files.
Can you try:
var packer = gulp.src(['./src/basePolyfills.ts', './src/external.ts', './src/main.ts'])
.pipe(named())
.pipe(webpack({
output: { filename: '[name].[chunkhash].js' },
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts' },
{ test: /\.html$/, loader: 'html' }
]
},
resolve: { extensions: ['', '.js', '.ts'] }
}))
.pipe(gulp.dest('./wwwroot/js/'));
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']
}