I've been using Webpack only for a short time and I don't know the configuration possibilities well yet.
I wrote some Vue code in Typescript. The code imports from Vue and from a few other packages.
Packing the whole thing takes 70 seconds. This is far too much time if I want to test small changes.
On the other hand, of course, Vue should be bundled to be available during runtime.
Is it possible to work with two webpack configuration files (e.g. webpack.vue.config.js and webpack.my.config.js) so that I don't have to repackage all dependencies on Vue and other packages in every build?
I'd like to pack the webpack.vue.config once and it always stays the same until I update a package. And after changes in my own code, I compile and pack my own code, which is very small and could be packed in about 5-10 seconds. Is that possible? If so, how can I achieve that?
My webpack.config:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { TsconfigPathsPlugin } = require( 'tsconfig-paths-webpack-plugin' );
const { VueLoaderPlugin } = require( 'vue-loader' );
module.exports = {
stats:"minimal",
entry: {
script: './src/index.ts',
mainstyle: './src/css/myproject.less'
},
optimization: {
minimize: false
},
output: {
filename: '[name].bundle.js',
path: path.resolve( __dirname, 'dist/' ),
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(tsx|ts)?$/,
loader: 'ts-loader',
exclude: [/node_modules/, /Scripts/],
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
}
]
},
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue'],
plugins: [new TsconfigPathsPlugin( { configFile: "src/tsconfig.json" })],
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin( {
filename: '[name].css',
} ),
],
mode: "production",
devtool: 'source-maps'
};