Webpack - instalace za 5 minut

Komplexní souhrn postupu pro nastavení webpacku vychází z podrobných článků: Webpack  - krok za krokem, Webpack - Loadery a Plugin krok za krokem

1. Spusťte v terminálu následující příkazy, aby se vytvořili potřebné adresáře a nainstalovali všechny závislosti

> mkdir project_name && cd project_name
> npm init
> mkdir src dist src/assets src/assets/media src/assets/js src/assets/scss
> touch webpack.config.js README.md .babelrc src/index.html src/app.js src/assets/scss/app.scss
> npm i -D webpack
> npm i -D webpack-dev-server clean-webpack-plugin babel-loader babel-core babel-preset-env html-loader html-webpack-plugin sass-loader node-sass css-loader style-loader extract-text-webpack-plugin file-loader

2. Přidejte snippet do .babelrc

{
  "presets": ["env"]
}

3. Konfigurace package.json > snippet script

"scripts": {
  "build": "./node_modules/.bin/webpack",
  "build:prod": "./node_modules/.bin/webpack -p",
  "watch": "./node_modules/.bin/webpack --watch",
  "dev": "./node_modules/.bin/webpack-dev-server"
}

4. Import app.scss do app.js

import './assets/scss/app.scss';

5. Aktualizujte src/index.html a src/assets/scss/app.scss a přidejte obrázky do src/assets/media

6. Zkopírujte a vložte následující konfiguraci do souboru webpack.config.js (ujistěte se, že hierarchie adresářové struktury je stejná)

const path = require('path'),
      webpack = require('webpack'),
      CleanWebpackPlugin = require('clean-webpack-plugin'),
      HtmlWebpackPlugin = require('html-webpack-plugin'),
      ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractPlugin = new ExtractTextPlugin({ filename: './assets/css/app.css' });

const config = {

  // absolute path for project root with the 'src' folder
  context: path.resolve(__dirname, 'src'),

  entry: {
    // relative path declaration
    app: './app.js'
  },

  output: {
    // absolute path declaration
    path: path.resolve(__dirname, 'dist'),
    filename: './assets/js/[name].bundle.js'
  },

  module: {
    rules: [

      // babel-loader with 'env' preset
      { test: /\.js$/, include: /src/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['env'] } } },
      // html-loader
      { test: /\.html$/, use: ['html-loader'] },
      // sass-loader with sourceMap activated
      {
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'src', 'assets', 'scss')],
        use: extractPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ],
          fallback: 'style-loader'
        })
      },
      // file-loader(for images)
      { test: /\.(jpg|png|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/media/' } } ] },
      // file-loader(for fonts)
      { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }

    ]
  },

  plugins: [
    // cleaning up only 'dist' folder
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    // extract-text-webpack-plugin instance
    extractPlugin
  ],

  devServer: {
    // static files served from here
    contentBase: path.resolve(__dirname, "./dist/assets/media"),
    compress: true,
    // open app in localhost:2000
    port: 2000,
    stats: 'errors-only',
    open: true
  },

  devtool: 'inline-source-map'

};

module.exports = config;

7. Spusťte skripty npm, abyste viděli aplikaci v akci ve formátu prohlížeče a v developerském formátu. Nezapomeňte zkontrolovat prvek v konzole prohlížeče, abyste se ujistili, že vše funguje bez jakékoli chyby.