Webpack 2

Aquí veremos un pequeño ejemplo de como usar webpack2 + babel + sass

instalar dependencias

instalamos dependencias básicas

npm install [email protected] babel-core babel-preset-es2015 node-sass --save-dev

instalamos cargadores para compilar y procesar

npm install babel-loader sass-loader css-loader style-loader --save-dev

webpack config

const config = {
  entry: __dirname + '/src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              ['es2015', {modules:false}]
            ],
            plugins: []
          }
        }]
      },
      {
        test: /.scss$/,
        use: [
        {
          loader: 'style-loader',
          options: {}
        },
        {
          loader: 'css-loader',
          options: {}
        },
        {
          loader: 'sass-loader',
          options: {}
        }]
        //loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  }
};

module.exports = config;

creamos nuestro proyecto

creamos el archivo src/component/main.js
creamos el archivo src/app.js
creamos el archivo src/app.scss
creamos el archivo index.html

src/component/main.js

class MainComponent
{
  constructor(){
    if(typeof this.render == 'undefined') new Error('method render not exist')
  }
}

export default MainComponent;

src/app.js

import './app.scss';
import MainComponent from './component/main';

class App extends MainComponent
{
  render(){
    return `Hello World`;
  }
}

//ready
document.getElementById('root').innerText = (new App).render();

src/app.scss

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  color:gray;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <title>App</title>
</head>
<body>
  <div id="root">ready?</div>
  <script src="dist/bundle.js"></script>
</body>
</html>

juanpablocs/webpack2.md

Webpack 2

instalar dependencias

webpack config

creamos nuestro proyecto

src/component/main.js

src/app.js

src/app.scss

index.html