[webpack install] #setup

webpack-inst.txt

Set up a new project with Webpack:

Create a new folder for your project:
Remember to run npm init in your project’s root directory.
Remember to create a .gitignore file and add node_modules at the top
Create the following folders within:
src
build
Create the following files:
index.html (in project root)
main.scss (in src)
main.js (in src)
webpack.config.js (in project root)
In webpack.config.js add the following code:

module.exports = {
   entry: './src/main.js',
   output: {
      filename: './build/bundle.js'
   },
};
Important: All of your webpack.config.js code will be inside of the above object separated by commas.

Run npm install -g webpack



webpack -p for building once for production (minification)
webpack --watch for continuous incremental build in development (fast!)
webpack -d to include source maps

First, run the following commands (in your project’s root directory):

npm install --save-dev sass-loader
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev node-sass
Next, add the following code to your webpack.config.js Inside the rules Array, after the JavaScript loader.

// ...

module: {
   rules: [
   // ...other loaders...
     {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
     },
  ]
}

import your .scss file into main.js, restart webpack-dev-server. Your .scss styles should visible in the browser.

npm install --save-dev file-loader

Add the following loader to your list of loaders in “webpack.config.js”:

{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  use: [{
    loader: 'file?name=public/fonts/[name].[ext]'
  }]
}
Create /public/fonts folder in your project. Any fonts you import into your .scss from this folder will be added to bundle.js.