I'm trying to configure my webpack to use css modules for all the scss files except for the files in the "src/scss" and "node_modules" folder. Below are my configuration file
const webpack = require('webpack');
const combineLoaders = require('webpack-combine-loaders');
const ImageMinPlugin = require('imagemin-webpack-plugin').default;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebappWebpackPlugin = require('webapp-webpack-plugin');
const path = require('path');
const NODE_ENV = process.env.NODE_ENV || 'development';
const DEV_MODE = NODE_ENV !== 'production';
const PORT = process.env.PORT || 3000;
const FAVICON_DIR = './src/assets/favicon/favicon.png';
const ENTRY_CSS = path.resolve(__dirname, 'src/scss');
const NODE_MODULE_PATH = path.resolve(__dirname, 'node_modules')
console.log('ENTRY_CSS: ', ENTRY_CSS);
console.log('NODE_MODULE_PATH: ', NODE_MODULE_PATH);
const styleRules = () => [
{
test: /\.scss$/,
exclude: [
ENTRY_CSS,
NODE_MODULE_PATH
],
loader: combineLoaders([
{
loader: 'style-loader',
},
{
loader: 'css-loader',
query: {
modules: true,
importLoaders: 1,
localIdentName: '[local]--[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('precss'),
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader',
query: {
includePaths: ['./src'],
},
},
]),
},
{
test: /\.css$/,
include: [
path.resolve(__dirname, 'src')
],
loader: combineLoaders([
{
loader: 'style-loader',
},
{
loader: 'css-loader',
query: {
modules: true,
importLoaders: 1,
localIdentName: '[local]--[hash:base64:5]',
},
},
]),
},
/**
* for global style, import libs, no CSS module applied for those files imported here.
*/
{
test: /\.scss$/,
include: [
ENTRY_CSS,
NODE_MODULE_PATH
],
loader: combineLoaders([
{
loader: 'style-loader',
},
{
loader: 'css-loader',
query: {
modules: false,
},
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('precss'),
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader',
query: {
includePaths: ['./src'],
},
},
]),
},
];
module.exports = {
entry: ['./src/index.tsx'],
mode: DEV_MODE ? 'development' : 'production',
devtool: DEV_MODE ? 'source-map' : '',
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
},
{
loader: 'ts-loader',
options: {
configFile: DEV_MODE ? 'tsconfig.json' : 'tsconfig.deploy.json',
},
},
],
},
...styleRules(),
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
{
test: /\.(ttf|eot|woff)(\?v=[0-9].[0-9].[0-9])?$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.json'],
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.[hash].js',
},
devServer: {
contentBase: './dist',
compress: true,
port: PORT,
historyApiFallback: true,
open: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
'process.env.PORT': JSON.stringify(PORT),
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
...(FAVICON_DIR ? [new WebappWebpackPlugin(FAVICON_DIR)] : []),
new ImageMinPlugin({
disable: DEV_MODE,
pngquant: {
quality: '95-100',
},
test: /\.(jpe?g|png|gif|svg)$/i,
}),
],
};
I'm importing Bootstrap's SCSS files in "main.scss" which is place inside the "src/scss" folder. The bootstrap files are also being hashed by css modules when I run my app. Can I know what mistake am I doing?
You can use exclude option of css-loader,
loaders: [{
test: /\.scss$/,
exclude: fs.realpathSync('./node_modules/path/to/bootstrap/src/styles')
loader: cssModulesLoader,
}
Related
Information: I do not use NextJS in this project.
When I start my devSever I have a problem with styled-jsx/webpack as I mentioned in the title. When I try to add a new rule to CSS about scoped styled I get an error styled-jsx/css: if you are getting this error it means that yourcsstagged template literals were not transpiled.
I tried to fix my config with these topics:
https://github.com/zeit/styled-jsx/issues/537
https://github.com/zeit/styled-jsx/issues/498
https://github.com/zeit/styled-jsx/issues/469#issuecomment-423243758
https://github.com/zeit/styled-jsx/issues/434#issuecomment-415801021
but It doesn't work in my case and I don't know what I'm doing wrong.
My webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ni = require('os').networkInterfaces();
const host = Object.keys(ni)
.map(interf => ni[interf].map(o => !o.internal && o.family === 'IPv4' && o.address))
.reduce((a, b) => a.concat(b))
.filter(o => o)[0];
const config = {
mode: 'development',
entry: './docs/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
resolve: {
alias: {
myPackage: path.resolve('./src/index')
}
},
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: require('styled-jsx/webpack').loader,
options: {
type: 'scoped'
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/i,
exclude: /\.module\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.module\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
}
]
},
{
test: /\.(scss)$/,
use: ['css-loader', 'sass-loader']
},
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
{ test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' },
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
issuer: {
test: /\.jsx?$/
},
use: ['babel-loader', '#svgr/webpack', 'url-loader']
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
},
{
test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/png'
},
{
test: /\.gif(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/gif'
}
]
},
devServer: {
historyApiFallback: true,
open: true,
compress: true,
port: 8080,
host,
hot: true
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html'
})
]
};
module.exports = config;
I tried also to add this styled-jsx/webpack loader in the same rules with babel-loader ( with style-loader and css-loader too) but It doesn't work either. Like this:
{
test: /\.(js?|css)$/,
// exclude: /node_modules/,
use: [
{
// I tried put a style-lodaer and css-lodaer to this rule but It dosent'work
loader: require('styled-jsx/webpack').loader,
options: {
type: 'scoped'
}
},
'babel-loader'
]
},
.babelrc
{
"presets": ["#babel/env", "#babel/preset-react"],
"plugins": [
"#babel/proposal-class-properties",
[
"styled-jsx/babel",
{
"optimizeForSpeed": true
}
]
]
}
I want to have a scoped css styles when import styles from css like a object and put them to the {styles}.
Do you have any advice about what I should do?
Everything was working fine. I installed npm module simplewebrtc and it stopped working.
The error I get is window is not defined:
webpack:///./node_modules/#andyet/simplewebrtc/node_modules/webrtc-adapter/src/js/adapter_core.js?:16
const adapter = Object(_adapter_factory_js__WEBPACK_IMPORTED_MODULE_0__["adapterFactory"])({window});
^
ReferenceError: window is not defined
at eval (webpack:///./node_modules/#andyet/simplewebrtc/node_modules/webrtc-adapter/src/js/adapter_core.js?:16:93)
at Module../node_modules/#andyet/simplewebrtc/node_modules/webrtc-adapter/src/js/adapter_core.js (/Users/testmac/node/test-frontend/frontend-test/server.js:2505:1)
at __webpack_require__ (/Users/testmac/node/test-frontend/frontend-test/server.js:21:30)
at eval (webpack:///./node_modules/#andyet/simplewebrtc/module.js?:37:72)
at Module../node_modules/#andyet/simplewebrtc/module.js (/Users/testmac/node/test-frontend/frontend-test/server.js:2493:1)
at __webpack_require__ (/Users/testmac/node/test-frontend/frontend-test/server.js:21:30)
at eval (webpack:///./app/src/components/common/calling/CallingSimple.js?:7:78)
at Module../app/src/components/common/calling/CallingSimple.js (/Users/testmac/node/test-frontend/frontend-test/server.js:1500:1)
at __webpack_require__ (/Users/testmac/node/test-frontend/frontend-test/server.js:21:30)
at eval (webpack:///./app/src/routes.js?:36:99)
I applied the solution given in this link but it did not work
My webpack.config.js is as follows:
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const ImageminPlugin = require('imagemin-webpack')
const imageminGifsicle = require('imagemin-gifsicle')
const imageminJpegtran = require('imagemin-jpegtran')
const imageminOptipng = require('imagemin-optipng')
const imageminSvgo = require('imagemin-svgo')
const server = {
entry: ['#babel/polyfill', './app/src/server.js'],
target: 'node',
output: {
path: __dirname,
filename: 'server.js',
globalObject: "this"
// libraryTarget: "commonjs2"
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'dist/assets/images/[name].[ext]'
}
},
{
test: /\.(css)$/,
loader: 'file-loader',
options: {
name: '/dist/assets/css/[name].[ext]'
}
},
// File loader used to load fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
name: '/dist/assets/fonts/[name].[ext]'
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'dist/assets/css/style.bundle.css'
}),
new webpack.BannerPlugin({
banner: '__isBrowser__ = false;',
raw: false,
include: /\.js$/
})
]
}
const client = {
entry: ['#babel/polyfill', './app/src/client.js'],
output: {
path: __dirname,
filename: './dist/app.bundle.js',
globalObject: "this"
},
devtool: 'source-map',
module: {
rules: [{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '/dist/assets/images/[name].[ext]'
}
},
{
test: /\.(css)$/,
loader: 'file-loader',
options: {
name: 'dist/assets/css/[name].[ext]'
}
},
// File loader used to load fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
name: '/dist/assets/fonts/[name].[ext]'
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /js$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'dist/assets/css/style.bundle.css'
}),
new OptimizeCssAssetsPlugin(),
new BundleAnalyzerPlugin(),
new ImageminPlugin({
bail: false,
cache: true,
imageminOptions: {
plugins: [
imageminGifsicle({
interlaced: true
}),
imageminJpegtran({
progressive: true
}),
imageminOptipng({
optimizationLevel: 5
}),
imageminSvgo({
removeViewBox: true
})
]
}
})
]
}
module.exports = (env) => [server, client]
But the error is still there.
I am using vuejs in wordpress theme, everything is properly setup and working.
npm run build works perfectly and creates dist and wordpress picks up all content from it.
What's the issue then?
npm run dev also works in the console but when I made any change in a vue template it compiles but IT DOES NOT SHOW UPDATED OUTPUT.
Please guide and help.
webpack.config.dev.js
const path = require('path');
const webpack = require('webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
if (fs.existsSync(path.resolve(__dirname, '../.env.example')) === true) {
fs.renameSync(
path.resolve(__dirname, '../.env.example'),
path.resolve(__dirname, '../.env'),
);
}
module.exports = (options = {}) => {
const config = {
entry: {
admin: './src/admin.js',
public: './src/public.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: 'http://localhost:9000/',
filename: 'js/[name].js',
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
sass: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
scss: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap',
},
preserveWhitespace: false,
postcss: [autoprefixer()],
},
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
exclude: /node_modules/,
},
{
test: /\.js|\.vue$/,
use: [{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '../.eslintrc.json'),
},
}, ],
enforce: 'pre',
exclude: /node_modules/,
},
{
test: /\.(s)?css$/,
use: [
'vue-style-loader?sourceMap',
'css-loader?sourceMap',
'postcss-loader?sourceMap',
'sass-loader?sourceMap',
],
},
{
test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
loader: 'file-loader',
query: {
name: '[hash].[ext]',
outputPath: 'static/',
},
exclude: /node_modules/,
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
context: '/',
},
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname, '../.stylelintrc.json'),
syntax: 'scss',
files: ['**/*.s?(a|c)ss', '**/*.vue'],
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
],
devServer: {
compress: true,
contentBase: path.join(__dirname, '../dist'),
headers: {
'Access-Control-Allow-Origin': 'http://localhost',
},
hot: true,
public: 'localhost:9000',
port: 9000,
overlay: {
errors: true,
warnings: true,
},
},
devtool: 'eval-source-map',
externals: {
jquery: 'jQuery',
},
resolve: {
alias: {
PublicJSUtilities: path.resolve(
__dirname,
'../src/public/js/utilities',
),
PublicCSSAbstracts: path.resolve(
__dirname,
'../src/public/css/abstracts',
),
PublicImg: path.resolve(__dirname, '../src/public/img'),
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
watch: options.watch === 'true',
};
return config;
};
webpack.vue.build.js
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
if (fs.existsSync(path.resolve(__dirname, '../.env')) === true) {
fs.renameSync(
path.resolve(__dirname, '../.env'),
path.resolve(__dirname, '../.env.example'),
);
}
module.exports = () => {
const config = {
entry: {
admin: './src/admin.js',
public: './src/public.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '',
filename: 'js/[name].js',
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
sass: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader?sourceMap!sass-loader?sourceMap',
}),
scss: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader?sourceMap!sass-loader?sourceMap',
}),
},
preserveWhitespace: false,
postcss: [autoprefixer()],
},
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
test: /\.js|\.vue$/,
use: [
{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '../.eslintrc.json'),
},
},
],
enforce: 'pre',
exclude: /node_modules/,
},
{
test: /\.(s)?css$/,
loader: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader!postcss-loader!sass-loader',
}),
},
{
test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
loader: 'file-loader',
query: {
name: '[hash].[ext]',
outputPath: 'static/',
publicPath: '../',
},
exclude: /node_modules/,
},
],
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../'),
verbose: true,
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
context: '/',
},
}),
new ExtractTextPlugin('css/[name].css'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname, '../.stylelintrc.json'),
syntax: 'scss',
files: ['**/*.s?(a|c)ss', '**/*.vue'],
}),
new webpack.optimize.ModuleConcatenationPlugin(),
],
externals: {
jquery: 'jQuery',
},
resolve: {
alias: {
PublicJSUtilities: path.resolve(
__dirname,
'../src/public/js/utilities',
),
PublicCSSAbstracts: path.resolve(
__dirname,
'../src/public/css/abstracts',
),
PublicImg: path.resolve(__dirname, '../src/public/img'),
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
};
return config;
};
Screenshot to get some idea about folder structure:
http://prntscr.com/n0cbg1
add --watch in start field in package.json file.
or use this command for executing:
npm run build -- --watch
I have posted my Webpack configs below for a production environment. I am attempting to use background-image: url(../img/chevron-thin-right.svg); in one of my SCSS files but it is being resolved to background-image: url([object Module]) and therefore not working. I am trying to port a purely SCSS and HTML project into a react app being bundled by Webpack so this above approach used to work. Any fixes would be greatly appreciated.
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: './src/client/index.js',
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
template: './public/index.html',
favicon: './public/favicon.ico',
hash: true,
filename: 'index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf)$/,
use: {
loader: 'file-loader?limit=100000&name=images/[name].[ext]'
}
},
{
test: /\.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [
{
removeTitle: true,
removeComments: true
}
],
floatPrecision: 2
}
}
}
]
}
]
}
};
webpack.prod.js
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');
const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = {};
module.exports = merge(common, {
mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
root: path.resolve(__dirname),
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
'browsers': ['last 2 versions', 'ie >= 10'],
}),
],
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true,
includePaths: [
'./src/client/style/scss',
],
},
}
]
}
]
}
});
In case anybody else is looking for an answer I was able to solve it. It was due to not loading the associated SVG through the url-loader. Another problem arose when adding svg back in because my inline SVGs I wanted to use as React components were running into errors as they were now going through the url-loader instead of my react-svg-loader.
Below is the working webpack.common.js and webpack.prod.js stayed the same. The solution was to differentiate my inline and external SVGs by turning all inline extensions from .svg to .inline.svg and adjusting webpack config accordingly
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: './src/client/index.js',
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
template: './public/index.html',
favicon: './public/favicon.ico',
hash: true,
filename: 'index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
exclude: /\.inline.svg$/,
use: {
loader: 'url-loader?limit=1000&name=images/[name].[ext]'
}
},
{
test: /\.inline.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [
{
removeTitle: true,
removeComments: true
}
],
floatPrecision: 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()
})
]
};