I'm using "webpack": "^3.1.0" and "extract-text-webpack-plugin": "^1.0.1"
Trying to compile sass and I get the following error: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
I have used this as per the documents provided - don't understand why I'm getting webpack build errors.
Here is my webpack file:
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: ['./js/client.js', './styles/base.scss'],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
new ExtractTextPlugin('main.css')
],
};
You need to include something to tell where webpack to look, for example:
{
test: /(\.css|\.scss|\.sass)$/,
include: path.join(__dirname, "../src"), // Include or exclude node modules
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"],
}),
},
Here is my webpack.config.babel.js file I hope this will helps you.
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin,{extract} from 'extract-text-webpack-plugin';
import {resolve,join} from 'path';
// import webpack from 'webpack';
// var isProd = process.env.NODE_ENV === 'production'; //return true or false
// var cssDev = [ "style-loader", "css-loader", "sass-loader" ];
// var cssProd = extract({
// fallback: "style-loader",
// use: [ "css-loader", "sass-loader"],
// publicPath:'/dist'
// });
// var cssConf = isProd ? cssProd : cssDev;
module.exports = {
entry: {
app:'./src/app.js',
},
output: {
path: join(__dirname, "dist"),
filename : '[name].bundle.js'
},
module: {
rules:[
{
test: /\.scss$/,
exclude: /node_modules/,
use: extract({
fallback: "style-loader",
use: [ "css-loader", "sass-loader"],
publicPath:'/dist'
})
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(png|jpg|gif)$/,
use:"file-loader",
}
]
},
devServer:{
contentBase: join(__dirname, "dist"),
compress: true,
port: 9000,
stats:'errors-only',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack starter project',
template: './src/index.html',
hash:true,
excludeChunks: ['contact'],
minify:{
collapseWhitespace: true,
minifyCSS: true,
minifyJS:true,
}
}),
new ExtractTextPlugin({
filename: "app.css",
// disable: !isProd,
disable: false,
allChunks: true
}),
// new webpack.HotModuleReplacementPlugin(),
// new webpack.NamedModulesPlugin(),
]
}
you have to change the version of Extract Text Plugin
Instead of new ExtractTextPlugin('main.css') use new
ExtractTextPlugin({ filename: "main.css"})
Related
Situation
I have a webpack setup, where I have a rule that extracts CSS and/or SASS from .ts files using the extract-text-webpack-plugin and sass-loader.
I import my SCSS file in a seperate .ts file
import './scss/style.scss'
Problem
A CSS file is expected to be in the output folder ( dist ).
The compilation completes without an error, yet there is no CSS file in the build folder.
Here is my webpack configuration:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var styleString = require('css-to-string-loader');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
filename: "[name].css",
disable: process.env.NODE_ENV === "development"
});
var helpers = require('./helpers');
var isProd = process.env.NODE_ENV === 'production';
module.exports = {
entry: {
polyfills: './src/polyfills.ts',
vendor: './src/vendor.ts',
app: isProd ? './src/main.aot.ts' : './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [{
test: /\.ts$/,
loaders: [
'babel-loader',
{
loader: 'awesome-typescript-loader',
options: {
configFileName: isProd ?
helpers.root('tsconfig-aot.json') :
helpers.root('tsconfig.json')
}
},
'angular2-template-loader'
],
exclude: [/node_modules/]
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[ext]'
},
{
test: /\.(json)$/,
loader: 'file-loader?name=assets/mocks/[name].[ext]'
},
{
test: /\.(css|scss)$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
Reason
The reason there is not output CSS file is because you are not using the
const extractSass = new ExtractTextPlugin({
filename: "[name].css",
disable: process.env.NODE_ENV === "development"
});
in your CSS|SCSS rule
{
test: /\.(css|scss)$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
}
Solution
You have to make use of the use property like so:
{
test: /\.(css|scss)$/,
use: extractSass.extract({ // <==== Right here, note the "extractSass"
use: [
{ loader: "to-string-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
],
fallback: "style-loader"
})
}
And add to your plugins array the ExtractTextPlugin instance ( extractSass ):
plugins: [
extractSass
]
You might also want to take a look here.
Here is my webpack config:
var path = require('path');
var webpack = require('webpack');
var CompressionPlugin = require("compression-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: 'public_html/assets/js/bundle.js'
},
resolveLoader: {
modules: ["node_modules"]
},
module: {
rules: [
{
enforce: 'pre',
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riotjs-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'es2015',
],
"babelrc": false
}
},
{
test: /\.css$/,
use: [
{
loader: "css-loader",
options: {
modules: false
}
}
]
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({debug: true}),
new UglifyJSPlugin(),
new webpack.ProvidePlugin({
riot: 'riot'
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|html)$/,
threshold: 10240,
minRatio: 0.8
})
]
}
This completely uglifies the bundle js but the problem is global variables references are lost. I mean the properties of global object DataMixin are lost.
For example, inside index.html I have:
<script>
window.onload = function () {
DataMixin.get_data_page_load(); //DataMixin defined in other js file
};
</script>
After uglifying, I get error:
Cannot read property 'get_data_page_load' of undefined
How do I fix this? I am using webpack 2.
For webpack 2 you don't need to install the external uglify plugin.
In your webpack config replace this new UglifyJSPlugin(), with the following:
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compressor: {
warnings: false,
},
}),
Removing presets fixed it but also had to remove arrow functions from my code.
Here is the solution I found: http://www.rootscopeblog.com/blog/post?=uglifying-riotjs-files-using-webpack-2
I am using Webpack 2 for building my Angular (4) app. I have it working, but I am trying to figure out how to generate sourcemaps for my scss. In my components I load my scss with styleUrls Adding the options: { sourceMap: true } is not working. I do not want to extract the styles for components, because then the ViewEncapsulation is not working anymore. The .global.scss I use are needed everywhere, so I do extract these and this part works fine. Can someone tell me how to generate my sourcemaps (is it even possible with Angular)? Below is my webpack.config.js .
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
devtool: 'inline-source-map',
devServer: {
port: 3000,
contentBase: '/www',
inline: true
},
entry: {
polyfills: './src/polyfills.ts',
vendor: './src/vendor.ts',
app: './src/bootstrap.ts'
},
output: {
path: path.join(__dirname, '../www/'),
filename: '[name].bundle.js'
},
resolve: {
modules: [ path.join(__dirname, 'node_modules') ],
extensions: ['.js', '.ts', '.html']
},
module: {
loaders: [{
test: /\.ts$/,
exclude: /node_modules/,
use: ['awesome-typescript-loader', 'angular2-template-loader']
}, {
test: /\.html$/,
use: 'html-loader'
},{
test: /\.global\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:[{
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'postcss-loader'
}, {
loader: 'sass-loader',
options: {
sourceMap: true,
}
}]
}),
}, {
test: /\.scss$/,
use: [ {
loader: "raw-loader"
}, {
loader: 'resolve-url-loader'
}, {
loader: 'postcss-loader'
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}],
exclude: /node_modules/
}, {
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
use: 'url-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new ExtractTextPlugin('global-styles.css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'polyfills',
chunks: ['polyfills']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['vendor']
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
})
]
};
I have a webpack config that compiles all my es2015 without a problem. it's uglified, etc.
Here is the config:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'production';
module.exports = {
devtool: 'source-map',
entry: {
filename: './src/index.js'
},
// entry: ['./src/index.js', './src/scss/main.scss'],
output: {
filename: './app/index.min.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
['es2015', { 'modules': false }]
]
}
}]//,
// rules: [{
// test: /\.css$/,
// use: ExtractTextPlugin.extract({
// use: 'css-loader?importLoaders=1',
// }),
// }, {
// test: /\.scss$/,
// use: ExtractTextPlugin.extract({
// fallback: 'style-loader',
// use: ['css-loader', 'sass-loader'],
// publicPath: '/app'
// })
// }]
},
plugins: [
new webpack.DefinePlugin({
'proccess.env': { NODE_ENV: JSON.stringify(nodeEnv) }
}),
// new ExtractTextPlugin({
// filename: './app/main.css',
// disable: false,
// allChunks: true
// }),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
output: { comments: false },
sourceMap: true
})
]
}
but when i uncomment the plugins and loaders and replace the entry files , I get an error from uglifyjs:
ERROR in ./app/index.min.js from UglifyJs
Invalid assignment [./src/js/modules/requests.js:19,0][./app/index.min.js:2083,38]
Which is correct, it doesn't know what to do with an => function. But why does the extra loaders mess up the order of the loaders (assuming now that this is the problem)?
Always open for better ways to fix this problem or perhaps a good examples (couldn't find myself)
You're using both module.rules and module.loaders. When webpack sees module.rules it ignores module.loaders completely, which means that your .js rule does not exist and therefore you don't transpile your JavaScript at all. module.loaders only exists for compatibility reasons and you should only use module.rules.
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
['es2015', { 'modules': false }]
]
}
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: '/app'
})
}]
}
I want to load module from variable string
var abc = './../containers/BlankContainer';
require(abc);
but it cannot find module, so I install 'require-from-string' module from npm.
Now when I build it's giving error
ERROR in ./~/require-from-string/index.js
Module not found: Error: Cannot resolve module 'module' in D:\Nilay\RnD\node_modules\require-from-string
# ./~/require-from-string/index.js 3:13-30
I found it is webpack issue, here is my webpack config:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
var entry = [path.resolve(__dirname, 'app/bootstrap.js')];
var output = {
path: path.resolve(__dirname, 'public/dist'),
filename: 'bundle-[name].js',
publicPath: "dist/"
};
var modules = {
loaders: [
{ test: /\.json$/, loader: "json-loader" },
{ test: /\.js$/,
loader: ['babel-loader'], exclude: /node_modules/, query: { cacheDirectory: 'babel_cache', presets: ['react', 'es2015'] } },
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader") },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.(woff|woff2)$/, loader: "file-loader" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" }
]
};
var plugins = [
new ExtractTextPlugin("bundle.css"),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ // minimize/compress all js chunks
compress: { warnings: false },
mangle: false,
sourcemap: false,
beautify: false,
dead_code: true
})
]
module.exports = {
entry: entry,
output: output,
stats: { colors: true },
watch: true,
module: modules,
plugins: plugins,
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
resolve: {
modules: [path.resolve(__dirname, '/app/routes'), 'node_modules/'],
descriptionFiles: ['package.json'],
extensions: ['', '.js', '.ts']
}
};
How can I resolve it?