Basic webpack. Guide to build a front-end project (React, Redux, Sass) using Webpack.

Tram Ho

1. Basic Webpack

Webpack : is a static module for wrapping JavaScript applications. It accepts modules along with dependencies and generates corresponding static assets. It is generally used to manage assets (js, css, image, font, etc.) in your project.

5 Basic Concepts in webpack:

  • Entry: it will indicate which webpack modules should be used to start building, meaning that the webpack will find this guy first.

  • Output: As with its name, it will tell the webpack where to create and name.

--> KQ nó sẽ tạo folder dist làm nơi chứa và file bundle.js

  • Loader: normally webpack only understand javascript and json file. The loader will allow the webpack to handle files of different formats and convert them for use. Loader has 2 properties:
    1. text : it determines which file should be converted.
    2. use : it determines which Loader should use for conversion.

  • Plugin: used to optimize, manage assets, etc.

HtmlWebpackPlugin: đây là pluin nó sẽ tự động tạo một file html và mặc định nếu ko truyền vào nó sẽ tạo index.html trong folder dist

  • Mode: By setting the value mode = development , production , none parameter, you can allow the webpack to run in any environment. The default is production

2. Guide to build front-end project (React, Redux, Sass) using Webpack

Before you begin, create a folder containing the project and create NPM.

Then install React, here I use yarn for fast ? You can also use npm as well.

To render the DOM in React, we need a react-dom package

Next I will install Redux.

In this project, Redux will work with React so I will install a module

Next, install the SASS module node

That’s it, the main modules for the project. Next install webpack,

Because the browser understands the JS ES5 syntax, React uses quite a lot of JS2015 (ES6) syntax, so it takes a module to be able to convert it into ES5 for a readable browser. Here I will install Babel

You create a .babelrc file in the react-app directory that was originally created to configure babel’s transpile. And add the following:

Next, install all the remaining modules to configure your webpack

I will explain briefly about the above modules

  1. css-loader: it will parse into Javascript
  2. sass-loader: it converts Sass into Css
  3. style-loader: insert CSS into the <style> tag
  4. clean-webpack-pluin: this module will clean up the folder containing the webpack build folder, remove unnecessary files.
  5. html-webpack-plugin: it will automatically create an html file (it will create index.html file in the webpack build folder)
  6. html-webpack-template: this is a convenient template for html-webpack-plugin
  7. webpack-dev-server: it is a module used to run on development environment
  8. webpack-merge: Used to join js files together.
  9. mini-css-extract-plugin: it will collapse the css file for the product environment.

After installing the modules, I will create some index.js and index.sass files

src/js/index.js

src/sass/index.scss

Now you have to customize webpack configuration ? First create 3 webpack.common.js webpack.dev.js files webpack.prod.js

  1. webpack.common.js is a basic generic webpack configuration file.
  2. webpack.dev.js is a webpack.dev.js file for development .
  3. webpack.prod.js is the webpack.prod.js file for the product

I will start basic configuration before webpack.common.js

Next configure the webpack.dev.js development environment

Next you configure webpack.prod.js for the production environment

Now, one final step is to adjust package.json to run ?

Now run yarn start to run with the development environment. If you need to build a product to use it, yarn build

Here, I would like to end the article here. If you make a mistake or get lost, see source: link

This is my first post so there are many errors expecting your understanding ?

Share the news now

Source : Viblo