Browse Source

Prepare webpack configurations for upgrade

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
webpack5
André Jaenisch 2 months ago
parent
commit
1a10506a7e
Signed by: ryuno-ki
GPG Key ID: 5A668E771F1ED854
  1. 130
      webpack.common.js
  2. 5
      webpack.dev.js
  3. 13
      webpack.prod.js

130
webpack.common.js

@ -1,65 +1,77 @@
'use strict'
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path=require('path')
const path = require('path')
module.exports = {
entry: './app.js',
stats: { children: false },
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index.js'
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
resolve: {
alias: {
Main: path.resolve(__dirname, 'main/')
}
},
module: {
rules: [
{ test: /\.vue$/, loader: 'vue-loader', options:
{ transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href'],
'tooltip-icon': 'src'
}
}
},
{ resourceQuery: /blockType=i18n/, type: 'javascript/auto', loader: '@intlify/vue-i18n-loader', },
{ test: /\.css$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] },
{ test: /\.(mp3|ogg)$/i, loader: 'file-loader', options: {outputPath: 'audio/', esModule: false} },
{ test: /\.(gif|png|jpe?g|svg)$/i, use: [
{ loader: 'file-loader', options: { outputPath: 'img/', esModule: false } },
{ loader: 'image-webpack-loader', options: { bypassOnDebug: true, disable: true } },
]},
{ test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts/' } } ]
},
{ test: /\.md$/i, use: 'raw-loader', },
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new CopyWebpackPlugin([
{from: './html/index.html'},
{from: './html/favicon.ico'},
{from: './html/apple-touch-icon.png'},
{from: './html/android-icon.png'},
{from: './html/manifest.json'}
])
]
entry: './app.js',
stats: { children: false },
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index.js'
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
},
resolve: {
alias: {
Main: path.resolve(__dirname, 'main/')
}
},
node: {
Buffer: false,
process: false
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options:
{
transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href'],
'tooltip-icon': 'src'
}
}
},
{ resourceQuery: /blockType=i18n/, type: 'javascript/auto', loader: '@intlify/vue-i18n-loader' },
{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.(mp3|ogg)$/i, loader: 'file-loader', options: { outputPath: 'audio/', esModule: false } },
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{ loader: 'file-loader', options: { outputPath: 'img/', esModule: false } },
{ loader: 'image-webpack-loader', options: { bypassOnDebug: true, disable: true } }
]
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [{ loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts/' } }]
},
{ test: /\.md$/i, use: 'raw-loader' }
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new CopyWebpackPlugin([
{ from: './html/index.html' },
{ from: './html/favicon.ico' },
{ from: './html/apple-touch-icon.png' },
{ from: './html/android-icon.png' },
{ from: './html/manifest.json' }
])
]
}

5
webpack.dev.js

@ -1,8 +1,7 @@
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path=require('path')
module.exports = merge(common, {
mode: 'development',
watch: true
mode: 'development',
watch: true
})

13
webpack.prod.js

@ -1,10 +1,9 @@
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path=require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // installed via npm
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // installed via npm
module.exports = merge(common, {
mode: 'production',
watch: false,
plugins: [ new CleanWebpackPlugin() ]
mode: 'production',
watch: false,
plugins: [new CleanWebpackPlugin()]
})

Loading…
Cancel
Save