当你只有一个依赖项时,这并不会有任何区别。但是如果你有一堆第三方库,你可以将它们打包和压缩成一个文件。这样在应用程序进入生产环境时会给你带来优势。
另外的好处是将 .scss 转换成 css。
示例 web pack 配置
module.exports = {
mode: 'development',
entry: {
'main.app.bundle': ['main.ts', "./somestyle.css"]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
output: {
publicPath: '/dist/',
filename: '[id].js',
chunkFilename: "[name].js",
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'exports-loader?module.exports.toString()',
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader',
]
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader',
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
}
]
},
node: {
fs: 'empty'
},
resolve: {
modules: [
__dirname,
'node_modules',
],
extensions: [".ts", ".tsx", ".js"]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HashOutput({
validateOutput: false,
}),
new MiniCssExtractPlugin({
filename: 'application.bundle.css',
chunkFilename: '[name].css'
})
],
devtool: 'source-map',
externals: [],
devServer: {
historyApiFallback: true
}
};