Answer the question
In order to leave comments, you need to log in
How do you name third party libraries in Webpack?
I'm taking a video course on working with Webpack. Everything is pretty clear, except for one little thing. My JS files are named as [name].[contenthash].js when built, but when it comes to npm packages (like jQuery), the filename can be horrendous (like vendors-node_modules_jquery_dist_jquery_js.8af6c5222bb9e60a6726.js). Obviously, it takes the path to the package and uses it as [name]. But I think this is some kind of inelegant way of naming files. How is it done in real development? My webpack.config.js looks like this:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
analytics: './src/analytics.js'
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HTMLWebpackPlugin({
template: path.resolve(__dirname, './src/index.html')
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/favicon.ico'),
to: path.resolve(__dirname, 'dist')
}
]
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
resolve: {
alias: {
'@models': path.resolve(__dirname, 'src/models'),
'@': path.resolve(__dirname, 'src')
}
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(jpg|png|gif|svg)$/,
use: ['file-loader']
},
{
test: /\.(ttf|woff|woff2|eot)$/,
use: ['file-loader']
}
]
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question