Bem... Ao utilizar o webpack 4 no meu projeto, me deparei com a seguinte mensagem: "Desde o webpack v4, o CommonsChunkPlugin foi removido em favor de optimization.splitChunks". Visto isto, já se sabe né: "Puts! Tudo o que o professor está fazendo passo a passo na video aula não será como esperado... =/". Enfim, sou um pouco lento para entender as coisas, todavia quero compartilhar com os que passam pelo mesmo aperreio que eu, como FICOU meu arquivo final utilizando agora o SPLIT-CHUNKS-PLUGIN no projeto... O resultado final, será 2 bundles na pasta dist (Um contendo somente o js do projeto e o outro contendo o js referente ao botstrap-jquery-reflect).... Diferentemente da video-aula, continuamos aqui tendo apenas um entry! as libs q quero separar em um novo bundle ficará contido na propriedade test. Atentem-se ao comentário no codigo p/ + infos. =)
const path = require('path'); //um modulo nativo do node!
//const extractTextPlugin = require('extract-text-webpack-plugin');// DEPRECIADO [foi passado na aula]
const miniCssExtractPlugin = require('mini-css-extract-plugin'); //RECOMENDADO [Ele cria um arquivo CSS por arquivo JS que contém CSS.]
const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');//utilizado no build-prod p/ minificação do css
const webpack = require('webpack');//usado p/ tornar publico o modulo jquery e dai este ser encontrado pelo modulo do bootstrap
let pluginsInternos = [];
pluginsInternos.push(
new miniCssExtractPlugin({
filename: 'styles.css'
})
);
pluginsInternos.push(
new webpack.ProvidePlugin({
'$': 'jquery/dist/jquery.js',
'jQuery': 'jquery/dist/jquery.js'
})
)
if(process.env.NODE_ENV == 'production'){
pluginsInternos.push(new webpack.optimize.ModuleConcatenationPlugin());/
pluginsInternos.push(new optimizeCSSAssetsPlugin({
cssProcessor: require('cssnano'),/
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: true
}))
}
module.exports = {
plugins: pluginsInternos,
entry: './app-src/app.js', //ponto de entrada. especifico qual será o 1º modulo a ser carregado
output: { //crie o arquivo bundle.js na pasta dist[esta será criada apartir do diretorio atual 'client', informada pelo _dirname]
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),//path.resolve() criará o caminho completo até a pasta dist
publicPath: 'dist'//qdo servidor rodando, o bundle.js é gerado em memoria pelo webpackdevserver. aqui defino que este arquivo estara dentro da past dist
},
optimization: {//substituto do CommonsChunkPlugin
splitChunks: {
cacheGroups: {
vendor: {
filename: 'vendor.bundle.js', //aqui defino o nome do arquivo a ser gerado
test: /[\\/]node_modules[\\/](jquery|bootstrap|reflect-metadata)[\\/]/,//defino quais libs dentro de node_modules quero que fiquem separado neste bunde
chunks: 'all'//tipo de otimização[consulte + detalhes na documentação https://webpack.js.org/guides/code-splitting/]
}
}
}
},
module: {//o module permite ter varias regras de execução
rules: [//cada regra pode usar um módulo específico quando aplicada. aqui sera usado o loader
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [miniCssExtractPlugin.loader, 'css-loader']
/* use: miniCssExtractPlugin.extract({
