first commit
This commit is contained in:
Senad Uka
207
config/webpack/Base.js
Normal file
207
config/webpack/Base.js
Normal file
@@ -0,0 +1,207 @@
|
||||
'use strict'; // eslint-disable-line
|
||||
|
||||
/**
|
||||
* Webpack configuration base class
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const npmBase = path.join(__dirname, '../../node_modules');
|
||||
|
||||
class WebpackBaseConfig {
|
||||
|
||||
constructor() {
|
||||
this._config = {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the list of included packages
|
||||
* @return {Array} List of included packages
|
||||
*/
|
||||
get includedPackages() {
|
||||
return [].map((pkg) => fs.realpathSync(path.join(npmBase, pkg)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the config data.
|
||||
* This will always return a new config
|
||||
* @param {Object} data Keys to assign
|
||||
* @return {Object}
|
||||
*/
|
||||
set config(data) {
|
||||
this._config = Object.assign({}, this.defaultSettings, data);
|
||||
return this._config;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the global config
|
||||
* @return {Object} config Final webpack config
|
||||
*/
|
||||
get config() {
|
||||
return this._config;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the environment name
|
||||
* @return {String} The current environment
|
||||
*/
|
||||
get env() {
|
||||
return 'dev';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the absolute path to src directory
|
||||
* @return {String}
|
||||
*/
|
||||
get srcPathAbsolute() {
|
||||
return path.resolve('./src');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the absolute path to tests directory
|
||||
* @return {String}
|
||||
*/
|
||||
get testPathAbsolute() {
|
||||
return path.resolve('./test');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the default settings
|
||||
* @return {Object}
|
||||
*/
|
||||
get defaultSettings() {
|
||||
const cssModulesQuery = {
|
||||
modules: true,
|
||||
importLoaders: 1,
|
||||
localIdentName: '[name]-[local]-[hash:base64:5]'
|
||||
};
|
||||
|
||||
return {
|
||||
context: this.srcPathAbsolute,
|
||||
devtool: 'eval',
|
||||
devServer: {
|
||||
contentBase: ['./public/', './src/'],
|
||||
publicPath: '/assets/',
|
||||
historyApiFallback: true,
|
||||
hot: true,
|
||||
inline: true,
|
||||
port: 5000
|
||||
},
|
||||
entry: './index.js',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.js?$/,
|
||||
include: this.srcPathAbsolute,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: ['es2015', 'react', 'stage-2']
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /^.((?!cssmodule).)*\.css$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{ loader: 'css-loader' }
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2|ttf|eot|ico)$/,
|
||||
loader: 'file-loader'
|
||||
},
|
||||
{
|
||||
test: /^.((?!cssmodule).)*\.styl$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{ loader: 'css-loader' },
|
||||
{ loader: 'stylus-loader' }
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
include: [].concat(
|
||||
this.includedPackages,
|
||||
[this.srcPathAbsolute]
|
||||
),
|
||||
loaders: [
|
||||
// Note: Moved this to .babelrc
|
||||
{ loader: 'babel-loader' }
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.cssmodule\.(sass|scss)$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
query: cssModulesQuery
|
||||
},
|
||||
{ loader: 'sass-loader' }
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.cssmodule\.css$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
query: cssModulesQuery
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.cssmodule\.less$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
query: cssModulesQuery
|
||||
},
|
||||
{ loader: 'less-loader' }
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.cssmodule\.styl$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
query: cssModulesQuery
|
||||
},
|
||||
{ loader: 'stylus-loader' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
output: {
|
||||
path: path.resolve('./dist/assets'),
|
||||
filename: 'app.js',
|
||||
publicPath: './assets/'
|
||||
},
|
||||
plugins: [],
|
||||
resolve: {
|
||||
alias: {
|
||||
actions: `${this.srcPathAbsolute}/actions/`,
|
||||
components: `${this.srcPathAbsolute}/components/`,
|
||||
config: `${this.srcPathAbsolute}/config/${this.env}.js`,
|
||||
images: `${this.srcPathAbsolute}/images/`,
|
||||
sources: `${this.srcPathAbsolute}/sources/`,
|
||||
stores: `${this.srcPathAbsolute}/stores/`,
|
||||
styles: `${this.srcPathAbsolute}/styles/`
|
||||
},
|
||||
extensions: ['.js', '.jsx'],
|
||||
modules: [
|
||||
this.srcPathAbsolute,
|
||||
'node_modules'
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = WebpackBaseConfig;
|
||||
78
config/webpack/Dev.js
Normal file
78
config/webpack/Dev.js
Normal file
@@ -0,0 +1,78 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Default dev server configuration.
|
||||
*/
|
||||
const webpack = require('webpack');
|
||||
const WebpackBaseConfig = require('./Base');
|
||||
|
||||
class WebpackDevConfig extends WebpackBaseConfig {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.config = {
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: [
|
||||
'webpack-dev-server/client?http://0.0.0.0:5000/',
|
||||
'webpack/hot/only-dev-server',
|
||||
'react-hot-loader/patch',
|
||||
'./client.js'
|
||||
],
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
new webpack.ProvidePlugin({
|
||||
$: "jquery",
|
||||
jQuery: "jquery",
|
||||
"window.jQuery": "jquery"
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
||||
},
|
||||
}),
|
||||
]
|
||||
};
|
||||
|
||||
this.config.module.rules = this.config.module.rules.concat([
|
||||
{
|
||||
test: /^.((?!cssmodule).)*\.(sass|scss)$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
test: /^.((?!cssmodule).)*\.less$/,
|
||||
use: [
|
||||
{ loader: "style-loader" },
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, {
|
||||
loader: "less-loader",
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
// console.log(this.config.module.rules);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = WebpackDevConfig;
|
||||
88
config/webpack/Dist.js
Normal file
88
config/webpack/Dist.js
Normal file
@@ -0,0 +1,88 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Dist configuration. Used to build the
|
||||
* final output when running npm run dist.
|
||||
*/
|
||||
const webpack = require('webpack');
|
||||
const WebpackBaseConfig = require('./Base');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
|
||||
const path = require('path');
|
||||
const ROOT = path.resolve(__dirname, '../..');
|
||||
function root(args) {
|
||||
args = Array.prototype.slice.call(arguments, 0);
|
||||
return path.join.apply(path, [ROOT].concat(args));
|
||||
}
|
||||
|
||||
class WebpackDistConfig extends WebpackBaseConfig {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.config = {
|
||||
cache: false,
|
||||
devtool: 'source-map',
|
||||
entry: [
|
||||
'./client.js'
|
||||
],
|
||||
output: {
|
||||
path: root('dist'),
|
||||
publicPath: '/',
|
||||
filename: 'assets/app.js',
|
||||
chunkFilename: 'assets/[id].[hash].chunk.js'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
||||
},
|
||||
}),
|
||||
new webpack.optimize.AggressiveMergingPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
new webpack.ProvidePlugin({
|
||||
$: "jquery",
|
||||
jQuery: "jquery",
|
||||
"window.jQuery": "jquery"
|
||||
}),
|
||||
new CopyWebpackPlugin([
|
||||
{ from: root('public/'), to: root('dist/') },
|
||||
{ from: root('src/assets/images'), to: root('dist/assets/images') },
|
||||
//{ from: root('src/assets/images-demo'), to: root('dist/assets/images-demo') },
|
||||
]),
|
||||
]
|
||||
};
|
||||
|
||||
// Deactivate hot-reloading if we run dist build on the dev server
|
||||
this.config.devServer.hot = false;
|
||||
|
||||
this.config.module.rules = this.config.module.rules.concat([
|
||||
{
|
||||
test: /^.((?!cssmodule).)*\.(sass|scss)$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{ loader: 'css-loader' },
|
||||
{ loader: 'postcss-loader' },
|
||||
{ loader: 'sass-loader' }
|
||||
]
|
||||
}, {
|
||||
test: /^.((?!cssmodule).)*\.less$/,
|
||||
loaders: [
|
||||
{ loader: 'style-loader' },
|
||||
{ loader: 'css-loader' },
|
||||
{ loader: 'postcss-loader' },
|
||||
{ loader: 'less-loader' }
|
||||
]
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the environment name
|
||||
* @return {String} The current environment
|
||||
*/
|
||||
get env() {
|
||||
return 'dist';
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = WebpackDistConfig;
|
||||
0
config/webpack/Server.js
Normal file
0
config/webpack/Server.js
Normal file
9
config/webpack/index.js
Normal file
9
config/webpack/index.js
Normal file
@@ -0,0 +1,9 @@
|
||||
'use strict';
|
||||
|
||||
const dev = require('./Dev');
|
||||
const dist = require('./Dist');
|
||||
|
||||
module.exports = {
|
||||
dev,
|
||||
dist
|
||||
};
|
||||
Reference in New Issue
Block a user