Webpack basic configuration
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "webpack -p --progress",
"watch": "webpack --watch --progress --color"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"imports-loader": "^0.7.1",
"lodash": "^4.17.4",
"lost": "^8.0.0",
"postcss-cssnext": "^2.10.0",
"postcss-custom-media": "^5.0.1",
"postcss-loader": "^1.3.0",
"postcss-minify-params": "^1.2.2",
"postcss-minify-selectors": "^2.1.1",
"postcss-mixins": "^5.4.1",
"postcss-nested": "^1.0.1",
"postcss-partial-import": "^3.1.0",
"postcss-vertical-rhythm": "^1.1.5",
"postcss-will-change": "^1.1.0",
"postcss-zindex-order": "^1.0.1",
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"style-loader": "^0.17.0",
"webpack": "^2.4.1"
}
}
module.exports = {
plugins: [
require('postcss-custom-media'),
require('postcss-partial-import')({ extension: '.pcss' }),
require('postcss-nested'),
require('lost'),
require('postcss-cssnext'),
require('postcss-mixins'),
require('postcss-will-change'),
require('postcss-vertical-rhythm'),
require('postcss-minify-selectors'),
require('postcss-minify-params'),
],
};
// PRODUCTION SPECIFIC CONFIGURATION
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
var _ = require('lodash');
var entries = {
// TODO: Set the entry points, or the files where the compilation will start
// app: './web/static/js/app.js',
// appCSS: './web/static/css/app.pcss',
};
// TODO: Remove all the final/converted files every time webpack restarts, this is to prevent
// the use of an incorrect file. The folder in this example is /priv/static, just like in the path example
// in line 60 (it must be the same folder)
var cleanPlugin = new CleanWebpackPlugin(['static'], {
root: path.resolve('./priv'),
verbose: true,
dry: false,
});
function setCssExt(ext) {
return ext.replace(/\.js$/, '.css');
};
var generateManifestPlugin = function (compiler) {
return this.plugin('done', function (stats) {
stats = stats.toJson();
var assetStats = stats.assetsByChunkName;
for (var entryName in assetStats) {
var entryPath = assetStats[entryName];
if (/\.(?:pcss|scss|sass|css)$/.test(entries[entryName])) {
if (_.isArray(entryPath)) {
assetStats[entryName] = entryPath.map(function (ass) {
return setCssExt(ass);
});
} else {
assetStats[entryName] = setCssExt(entryPath);
}
}
}
// IGNORE:
// return fs.writeFileSync(
// path.join(outputDir,
// 'asset-stats.json'), JSON.stringify(stats.assetsByChunkName, null, 2)
// );
});
};
webpackConfiguration = {
devtool: false, // Production specific, 'eval' for develop
entry: entries,
output: {
// TODO: Set the directory where the final/converted CSS and JS files will reside, like (for Phoenix):
// path: path.resolve(__dirname, 'priv/static'),
publicPath: '/',
filename: 'js/[name].min.js', // Production specific
chunkFilename: 'js/[name].[id].min.js', // Production specific
},
resolve: {
modules: [
'node_modules',
// TODO: Set the directory where the CSS and JS entry files reside, like (for Phoenix):
// `${__dirname}/web/static/js`,
// `${__dirname}/web/static/css`,
],
},
module: {
noParse: /node_modules\/localforage\/dist\/localforage.js/,
rules: [
{ test: /\.js$/,
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', { modules: false }], 'stage-2'],
plugins: [
'dynamic-import-webpack',
],
}, },
], },
{ test: /\.jsx$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react', ['es2015', { modules: false }], 'stage-2'],
plugins: [
'dynamic-import-webpack',
],
}, },
], },
{ test: /\.pcss$/, exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader'], }), },
{ test: /\.css$/, exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader', }), },
],
},
plugins: [
cleanPlugin,
new ExtractTextPlugin({
filename: (getPath) => (getPath('css/[name].css').replace('CSS', '')),
allChunks: true, }),
// IGNORE:
// generateManifestPlugin,
new webpack.optimize.UglifyJsPlugin({
sourceMap: false, // Production specific
compress: {
warnings: false, // Production specific
},
})
],
};
module.exports = webpackConfiguration;