Mostrando entradas con la etiqueta webpack. Mostrar todas las entradas
Mostrando entradas con la etiqueta webpack. Mostrar todas las entradas

viernes, 16 de junio de 2017

Aprendiendo webpack

Resumen adaptación para Webpack Se está usando la siguiente estructura:
webpack_origen/
+dist/
  +js/
    +bundle.js
  +css/
  +images/
  +index.html
+src/
  +js/
    +index.js
    +content.js
  +css/
    +index.css
  +images/
  +index.html
+node_modules/
+webpack.config.js
+package.json
+readme.md
La configuración de package.json es como sigue:
{
  "name": "prodinca_webpage",
  "version": "1.0.0",
  "description": "de PSD a HTML5 vol07",
  "main": "./src/js/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch --colors",
    "start": "webpack-dev-server --progress --colors"
  },
  "keywords": [
    "udemy",
    "practica",
    "prueba",
    "maquetación",
    "página",
    "web"
  ],
  "author": "gerbo-san",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}
La configuración de webpack.config.js es como sigue:
var path = require('path');

module.exports = {
  entry: {
    app: './src/js/index.js'
  },

  output: {
    path: path.resolve(__dirname,'dist'),
    filename: './js/bundle.js',
    publicPath: '/dist/'
  },

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    inline: true
  },

  module: {
    loaders: [
      {
        test: /(\.js |.jsx)$/,
        loader: 'babel',
        exclude: '/node_modules/',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        exclude: '/node_modules'
      }
    ]
  }
};
Las fuentes que utilicé para estos archivos son:
webpack - Tutorials/Getting started
webpack - Getting Started
Youtube - Webpack | Curso Completo Practico desde Cero
Youtube - Primeros pasos con Webpack

La definición de la plantilla para trabajar con webpack todavía no está completa, cuestión de tiempo.