You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
wiki/dev/webpack/webpack.dev.js

255 lines
5.9 KiB

const webpack = require('webpack')
const path = require('path')
const fs = require('fs-extra')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const WriteFilePlugin = require('write-file-webpack-plugin')
const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
const cacheDir = '.webpack-cache/cache'
const babelDir = path.join(process.cwd(), '.webpack-cache/babel')
process.noDeprecation = true
module.exports = {
mode: 'development',
entry: {
client: ['./client/index.js', 'webpack-hot-middleware/client']
},
output: {
path: path.join(process.cwd(), 'assets'),
publicPath: '/',
filename: 'js/[name].js',
chunkFilename: 'js/[name].js',
globalObject: 'this',
pathinfo: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: cacheDir
}
},
{
loader: 'babel-loader',
options: {
...babelConfig,
cacheDirectory: babelDir
}
}
]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /\.scss$/,
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: cacheDir
}
},
'style-loader',
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
'vue-style-loader',
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-resources-loader',
options: {
resources: path.join(process.cwd(), '/client/scss/global.scss')
}
}
],
js: [
{
loader: 'cache-loader',
options: {
cacheDirectory: cacheDir
}
},
{
loader: 'babel-loader',
options: {
babelrc: path.join(process.cwd(), '.babelrc'),
cacheDirectory: babelDir
}
}
]
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.svg$/,
exclude: [
path.join(process.cwd(), 'client/svg')
],
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'svg/'
}
}
]
},
{
test: /\.svg$/,
include: [
path.join(process.cwd(), 'client/svg')
],
use: [
{
loader: 'raw-loader'
}
]
},
{
test: /.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['es2015', 'react']
}
},
{
test: /\.flow$/,
loader: 'ignore-loader'
}
]
},
plugins: [
new CopyWebpackPlugin([
{ from: 'client/static' },
{ from: './node_modules/graphql-voyager/dist/voyager.worker.js', to: 'js/' }
], {}),
new HtmlWebpackPlugin({
template: 'dev/templates/master.pug',
filename: '../server/views/master.pug',
hash: false,
inject: 'head'
}),
new HtmlWebpackPugPlugin(),
new SimpleProgressWebpackPlugin({
format: 'compact'
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: '"development"' },
'__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
}),
new WriteFilePlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin([
/node_modules/
])
],
optimization: {
namedModules: true,
namedChunks: true,
splitChunks: {
cacheGroups: {
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
},
vendor: {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
priority: -10
}
}
},
runtimeChunk: 'single'
},
resolve: {
mainFields: ['browser', 'main', 'module'],
symlinks: true,
alias: {
'@': path.join(process.cwd(), 'client'),
'vue$': 'vue/dist/vue.esm.js',
'mdi': path.resolve(process.cwd(), 'node_modules/vue-material-design-icons'),
// Duplicates fixes:
'apollo-link': path.join(process.cwd(), 'node_modules/apollo-link'),
'apollo-utilities': path.join(process.cwd(), 'node_modules/apollo-utilities'),
'uc.micro': path.join(process.cwd(), 'node_modules/uc.micro')
},
extensions: [
'.js',
'.json',
'.jsx',
'.vue'
],
modules: [
'node_modules'
]
},
node: {
fs: 'empty'
},
stats: {
children: false,
entrypoints: false
},
target: 'web',
watch: true
}