I'm a newcomer to webpack and feeling lost on how to properly configure the settings.
Here is my project structure:
/
-- /public
-- /js
-- app.js
-- /css
-- app.scss
-- /node_modules
-- /autoprefixer
-- /babel-loader
-- /babel-core
-- /babel-preset-es2015
-- /css-loader
-- /node-sass
-- /postcss-loader
-- /sass-loader
-- /style-loader
-- /webpack
-- package.json
-- .babelrc
-- webpack.config.js
This is how my webpack.config.js file looks like:
var autoprefixer = require('autoprefixer');
var css = require('./public/css/app.scss');
module.exports = {
entry: './public/js/app.js',
output: {
filename: '.public/bundle.js'
},
resolve: {
extensions: ['', '.js', '.json']
},
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
},
postcss: function () {
return [autoprefixer];
}
};
When I run 'webpack' in the terminal, it throws an error:
(function (exports, require, module, __filename, __dirname) { body {
^
SyntaxError: Unexpected token {