Skip to content

Instantly share code, notes, and snippets.

@andrienko
Created November 7, 2018 15:52
Show Gist options
  • Save andrienko/d2b33db895d63e0c3349aaba7161f2f8 to your computer and use it in GitHub Desktop.
Save andrienko/d2b33db895d63e0c3349aaba7161f2f8 to your computer and use it in GitHub Desktop.
This is my webpack config. There are many webpack configs, and this one is mine!
/* eslint-disable */
var path = require('path');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin');
var cssnano = require('cssnano');
var autoprefixer = require('autoprefixer');
var cssLoaderUse = function(asModules) {
return [
{ loader: MiniCssExtractPlugin.loader },
{
loader: 'css-loader',
options: { importLoaders: 1, modules: asModules, localIdentName: '[name]_[local]_[hash:base64:3]' }
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: [`last 2 versions`]
}),
cssnano()
]
}
},
{
loader: 'less-loader',
options: {
paths: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'src', 'common'),
path.resolve(__dirname, 'node_modules')
]
}
}
];
};
module.exports = {
entry: './src/index.js',
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules', path.resolve(__dirname, 'src')],
alias: {
react: 'preact-compat',
'mobx-react': 'mobx-preact',
'react-dom': 'preact-compat'
}
},
output: {
path: path.resolve('./dist'),
filename: 'editor.js'
},
plugins: [
new MiniCssExtractPlugin({ filename: 'editor.css' }),
new WriteFilePlugin()
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-react-jsx',
'@babel/plugin-transform-flow-strip-types',
['@babel/plugin-transform-async-to-generator', {
"module": "bluebird",
"method": "coroutine"
}],
'@babel/plugin-proposal-object-rest-spread',
['@babel/plugin-proposal-class-properties', {loose: true}]
]
}
}
},
{
test: /\.(le|c)ss$/,
exclude: [/node_modules/, /common/],
use: cssLoaderUse(true)
},
{
test: /\.(le|c)ss$/,
include: [/node_modules/, /common/],
use: cssLoaderUse(false)
}
]
},
mode: 'production',
devServer: {
stats: 'errors-only',
port: process.env.port || 3000,
publicPath: '/editor/',
contentBase: path.join(__dirname, '..'),
overlay: true,
after: (a)=>{
console.log(' http://localhost:' + (process.env.port || 3000) + '/editor/');
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment