ng6-cli
Version:
Tooling to build applications with Angular 1.5, ES6, and Webpack.
239 lines (216 loc) • 6.32 kB
JavaScript
/* eslint comma-dangle: ["warn", "always-multiline"] */
// https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8
const { resolve } = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
/*
getIfUtils will allow us to do ifProd()/ifDev()
removeEmpty will remove `undefined` from arrays
*/
const { getIfUtils, removeEmpty } = require('webpack-config-utils');
const PATHS = {
output: resolve(__dirname, 'dist/'),
app: resolve(__dirname, 'library.module.js'),
nodeModules: resolve(__dirname, 'node_modules'),
};
const sassResources = [
'./styles/_variables.scss',
];
const outputName = 'bundle.js';
module.exports = (env) => {
// env variables
const { ifDev, ifProd } = getIfUtils(env);
const webpackConfig = {
// https://webpack.js.org/configuration/devtool/
devtool: 'source-map',
entry: {
// Setup our main entry point for processing
library: [
PATHS.app,
],
},
// setup the output path
output: {
filename: outputName,
path: PATHS.output,
pathinfo: ifDev(),
libraryTarget: 'umd',
},
bail: ifProd(),
externals: {
'angular': 'angular',
},
resolve: {
modules: [
PATHS.nodeModules, // This is here to solve issues with npm linking projects
],
},
/*
Each of the following loaders objects describe the process to run specific file types through.
For example .scss files are run through the sass-resources-loader, then the sass-loader,
followed by the css-loader, and finally through the style loader.
*/
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
publicPath: '../',
}),
},
{
test: /\.scss$/, // Sass files with just the .scss suffix are processed normally
exclude: /\.module.scss$/,
loader: ExtractTextPlugin.extract({
publicPath: '../',
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: ifDev(),
},
},
{
loader: 'sass-loader',
options: {
sourceMap: ifDev(),
},
},
{
loader: 'sass-resources-loader',
options: {
resources: sassResources,
},
},
],
}),
},
{
test: /\.module.scss$/, // Sass files that have the .module.scss suffix will be processed with css-modules enabled (https://github.com/webpack/css-loader#css-modules)
loader: ExtractTextPlugin.extract({
publicPath: '../',
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
camelCase: true,
sourceMap: ifDev(),
importLoaders: 2,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
{
loader: 'sass-loader',
options: {
sourceMap: ifDev(),
},
},
{
loader: 'sass-resources-loader',
options: {
resources: sassResources,
},
},
],
}),
},
{
test: /\.(gif|png|jpg|jpeg)$/,
loader: 'url-loader',
options: {
limit: 1024,
name: 'images/[name].[ext]',
},
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 1024,
mimetype: 'image/svg+xml',
name: 'images/[name].[ext]',
},
},
{
test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 1024,
mimetype: 'application/font-woff',
name: 'fonts/[name].[ext]',
},
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 1024,
mimetype: 'application/octet-stream',
name: 'fonts/[name].[ext]',
},
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
{
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
{
test: /\.html$/,
loader: 'raw-loader',
},
],
},
plugins: removeEmpty([
new webpack.LoaderOptionsPlugin({
minimize: ifProd(),
debug: ifDev(),
}),
// Extract all the compiled scss into a single css file.
new ExtractTextPlugin({
filename: 'bundle.css',
allChunks: true,
}),
// Copy sass files to dist in flat list
new CopyWebpackPlugin([{
from: '**/*.scss',
to: 'styles',
flatten: true,
}]),
// Forces webpack-dev-server program to write bundle files to the file system.
// Useful for ionic dev when using ionic live-reloading.
ifDev(new WriteFilePlugin({ log: false })),
// PROD
ifProd(new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
})),
ifProd(new webpack.optimize.UglifyJsPlugin({
screw_ie8: true, // eslint-disable-line
warnings: false,
})),
]),
};
return webpackConfig;
};