tiptap/build/examples/webpack.config.js

200 lines
4.3 KiB
JavaScript
Raw Normal View History

2018-08-21 05:02:21 +08:00
import path from 'path'
import webpack from 'webpack'
import { VueLoaderPlugin } from 'vue-loader'
import SvgStore from 'webpack-svgstore-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ManifestPlugin from 'webpack-manifest-plugin'
import ImageminWebpackPlugin from 'imagemin-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
import { ifDev, ifProd, removeEmpty } from './utilities'
2018-08-22 16:01:51 +08:00
import { rootPath, srcPath, buildPath } from './paths'
2018-08-21 05:02:21 +08:00
export default {
mode: ifDev('development', 'production'),
entry: {
2018-08-22 19:39:09 +08:00
app: removeEmpty([
2018-08-21 05:02:21 +08:00
ifDev('webpack-hot-middleware/client?reload=true'),
2018-08-22 16:01:51 +08:00
`${srcPath}/assets/sass/main.scss`,
`${srcPath}/main.js`,
2018-08-21 05:02:21 +08:00
]),
},
output: {
2018-08-22 16:01:51 +08:00
path: `${buildPath}/`,
2018-08-21 05:02:21 +08:00
filename: `assets/js/[name]${ifProd('.[hash]', '')}.js`,
chunkFilename: `assets/js/[name]${ifProd('.[chunkhash]', '')}.js`,
2018-08-22 04:40:55 +08:00
publicPath: '/',
2018-08-21 05:02:21 +08:00
},
resolve: {
extensions: ['.js', '.scss', '.vue'],
alias: {
vue$: 'vue/dist/vue.esm.js',
modules: path.resolve(rootPath, '../node_modules'),
2018-08-22 16:01:51 +08:00
images: `${srcPath}/assets/images`,
fonts: `${srcPath}/assets/fonts`,
variables: `${srcPath}/assets/sass/variables`,
settings: `${srcPath}/assets/sass/1-settings/index`,
2018-08-21 05:24:43 +08:00
tiptap: path.resolve(rootPath, '../src'),
2018-08-21 05:02:21 +08:00
},
modules: [
2018-08-22 16:01:51 +08:00
srcPath,
2018-08-21 05:02:21 +08:00
path.resolve(rootPath, '../node_modules'),
],
},
devtool: ifDev('eval-source-map', 'source-map'),
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: ifDev('babel-loader?cacheDirectory=true', 'babel-loader'),
2018-08-22 20:22:06 +08:00
exclude: /node_modules/,
2018-08-21 05:02:21 +08:00
},
{
test: /\.css$/,
use: removeEmpty([
ifDev('vue-style-loader', MiniCssExtractPlugin.loader),
'css-loader',
'postcss-loader',
]),
},
{
test: /\.scss$/,
use: removeEmpty([
ifDev('vue-style-loader', MiniCssExtractPlugin.loader),
'css-loader',
'postcss-loader',
'sass-loader',
]),
},
{
test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: `assets/images/[name]${ifProd('.[hash]', '')}.[ext]`,
},
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: `assets/fonts/[name]${ifProd('.[hash]', '')}.[ext]`,
},
},
},
],
},
// splitting out the vendor
optimization: {
namedModules: true,
splitChunks: {
name: 'vendor',
minChunks: 2,
},
noEmitOnErrors: true,
// concatenateModules: true,
},
plugins: removeEmpty([
// create manifest file for server-side asset manipulation
new ManifestPlugin({
fileName: 'assets/manifest.json',
writeToFileEmit: true,
}),
// define env
2018-08-21 05:24:43 +08:00
// new webpack.DefinePlugin({
// 'process.env': {},
// }),
2018-08-21 05:02:21 +08:00
// enable hot reloading
ifDev(new webpack.HotModuleReplacementPlugin()),
// html
new HtmlWebpackPlugin({
filename: 'index.html',
2018-08-22 16:01:51 +08:00
template: `${srcPath}/index.html`,
2018-08-21 05:02:21 +08:00
inject: true,
minify: ifProd({
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
}),
buildVersion: new Date().valueOf(),
chunksSortMode: 'none',
}),
new VueLoaderPlugin(),
// create css files
ifProd(new MiniCssExtractPlugin({
filename: `assets/css/[name]${ifProd('.[hash]', '')}.css`,
chunkFilename: `assets/css/[name]${ifProd('.[hash]', '')}.css`,
})),
// minify css files
ifProd(new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
reduceIdents: false,
autoprefixer: false,
zindex: false,
discardComments: {
removeAll: true,
},
},
})),
// svg icons
new SvgStore({
prefix: 'icon--',
svgoOptions: {
plugins: [
{ cleanupIDs: false },
{ collapseGroups: false },
{ removeTitle: true },
],
},
}),
// image optimization
new ImageminWebpackPlugin({
optipng: ifDev(null, {
optimizationLevel: 3,
}),
jpegtran: ifDev(null, {
progressive: true,
quality: 80,
}),
svgo: ifDev(null, {
plugins: [
{ cleanupIDs: false },
{ removeViewBox: false },
{ removeUselessStrokeAndFill: false },
{ removeEmptyAttrs: false },
],
}),
}),
]),
node: {
fs: 'empty',
},
}