Webpack minify css

Nesse post mostramos como configurar um projeto com webpack separando as configurações de desenvolvimento e produção. 

Dessa forma. trabalhamos com arquivos js na pasta src. E somente quando vamos construir o projeto para produção executamo npm run build para gerar um arquivo js mimificado. 

Vamos mostrar agora como fazer o procedimento semelhante para arquivos css. Vamos usar como exemplo esse mesmo projeto que citamos no post acima. Inicialmente devemos navegar até a raiz do projeto pelo prompt e executar esse comando para instalar a depedência necessária:

npm install --save-dev css-loader

O arquivo webpack.common.js não sofre alteração. fica do mesmo jeito:

var path = require("path");
var DIST_DIR = path.resolve(__dirname, "www");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR,
        filename: './bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

O arquivo webpack.dev.js deve ficar assim:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

common.module.loaders.push(
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
        );

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer:{
       port:8081,
       contentBase:"./www"
   },
   plugins:[
        new ExtractTextPlugin({filename:'./app.css'})
   ]
});

O arquivo webpack.prod.js deve ficar assim:

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

common.module.loaders.push(
            {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [{
                                loader:'css-loader',
                                options: {
                                    minimize: true
                                }
                        }]
                    })
            }
        );

   
 module.exports = merge(common, {
   plugins: [
     new UglifyJSPlugin({
      sourceMap: true
     }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     }),
     new ExtractTextPlugin({filename:'./app.css'})
   ]
 });

Podemos notar no código acima que vai ser gerado um arquivo chamado app.css 

Por isso devemos alterar o index.html para fazer referência a esse arquivo:

<link rel="stylesheet" href="./app.css">

Já no código react, podemos fazer o import do arquivo css da pasta src que queremos utilizar 

import 'style.css';

Depois que executamos npm run build, é gerado um arquivo chamado app.css dentro da pasta www. Esse arquivo fica mimificado por que usamos a opção minimize: true

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente