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.
1 2 3 4 | module.exports = { entry: './index.js' } |
- Output: As with its name, it will tell the webpack where to create and name.
1 2 3 4 5 6 7 8 9 | const path = require('path'); module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/bundle.js' } } |
--> 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:
text
: it determines which file should be converted.use
: it determines which Loader should use for conversion.
1 2 3 4 5 6 7 8 9 10 | module.exports = { module: { rules: [ { test: /.(js|jsx)$/, loader: 'babel-loader', } ] } |
- Plugin: used to optimize, manage assets, etc.
1 2 3 4 5 6 7 8 9 | const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm const webpack = require('webpack'); //to access built-in plugins module.exports = { plugins: [ new HtmlWebpackPlugin() ] }; |
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 isproduction
1 2 3 4 | module.exports = { mode: '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.
1 2 3 4 | mkdir react-app cd react-app npm init -y |
Then install React, here I use yarn for fast You can also use npm as well.
1 2 | yarn add react (or) npm install react --save |
To render the DOM in React, we need a react-dom
package
1 2 | yarn add react-dom |
Next I will install Redux.
1 2 | yarn add redux |
In this project, Redux will work with React so I will install a module
1 2 | yarn add react-redux |
Next, install the SASS module node
1 2 | yarn add node-sass |
That’s it, the main modules for the project. Next install webpack,
1 2 | yarn add webpack webpack-cli --dev |
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
1 2 | yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react --dev |
You create a .babelrc
file in the react-app directory that was originally created to configure babel’s transpile. And add the following:
1 2 3 4 5 6 7 | { "presets": [ "@babel/preset-env", "@babel/preset-react" ] } |
Next, install all the remaining modules to configure your webpack
1 2 | yarn add css-loader sass-loader style-loader clean-webpack-plugin html-webpack-plugin html-webpack-template webpack-dev-server webpack-merge mini-css-extract-plugin --dev |
I will explain briefly about the above modules
- css-loader: it will parse into Javascript
- sass-loader: it converts Sass into Css
- style-loader: insert CSS into the <style> tag
- clean-webpack-pluin: this module will clean up the folder containing the webpack build folder, remove unnecessary files.
- html-webpack-plugin: it will automatically create an html file (it will create index.html file in the webpack build folder)
- html-webpack-template: this is a convenient template for html-webpack-plugin
- webpack-dev-server: it is a module used to run on development environment
- webpack-merge: Used to join js files together.
- 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
1 2 3 4 5 6 7 8 9 10 | import React from 'react'; import ReactDOM from 'react-dom'; function App() { return <h1>Hello World</h1>; } const root = document.getElementById('root'); ReactDOM.render(<App/>, root); |
src/sass/index.scss
1 2 3 4 5 6 7 8 9 10 | body { padding: 0; margin: 0; font: { size: 3rem; weight: 1000; }; color: red; } |
Now you have to customize webpack configuration First create 3 webpack.common.js
webpack.dev.js
files webpack.prod.js
webpack.common.js
is a basic generic webpack configuration file.webpack.dev.js
is awebpack.dev.js
file fordevelopment
.webpack.prod.js
is thewebpack.prod.js
file for theproduct
I will start basic configuration before webpack.common.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const path = require('path'); module.exports = { // entry chinh de bundle entry: ['./src/js/index.js', './src/sass/index.scss'], output: { filename: 'js/index.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ // các file .js or .jsx được loader bởi 'babel-loader' test: /.(js|jsx)$/, loader: 'babel-loader', exclude: [/node_modules/] // nó sẽ không tìm trong folder /node_modules }] } } |
Next configure the webpack.dev.js
development environment
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | const webpack = require('webpack'); const merge = require('webpack-merge'); const common = require('./webpack.common'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // nó ghép với file webpack`webpack.common.js` đã cấu hình cơ bản để sử dụng. module.exports = merge(common, { // môi trường : development mode: 'development', // nó sẽ hiển thị lỗi ở đâu (vì khi lỗi nó sẽ hiển thị ở file đã build trong folder dist // mà khi build là cú pháp js5 cái ta cần là chính xác lỗi chỗ nào, // đó là lý do bạn nên để 'inline-source-map' devtool: 'inline-source-map', devServer: { contentBase: './dist', hot: true }, module: { // các file scss được loader bởi style-loader, css-loader, sass-loader rules: [{ test: /.(scss|sass)$/, use: [{ loader: 'style-loader', }, { loader: 'css-loader' }, { loader: 'sass-loader' }] }] }, watch: true, plugins: [ // HotModuleReplacementPlugin: nó giúp tạo ra server riêng tự động reload khi có bất kỳ thay đổi nào từ các file hệ client của project/ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ title: 'Webpack React Example', inject: false, template: require('html-webpack-template'), meta: [{ name: 'description', content: 'A better default template for html-webpack-plugin.' }], mobile: true, lang: 'en-US', bodyHtmlSnippet: '<div id="root"></div>', }) ] }) |
Next you configure webpack.prod.js
for the production
environment
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | const merge = require('webpack-merge'); const common = require('./webpack.common.js'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = merge(common, { mode: 'production', devtool: 'source-map', module: { rules: [{ test: /.(scss|sass)$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "sass-loader" ] }] }, plugins: [ // nó sẽ clean thư mục`dist/js & dist/css` trước khi build new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['dist/js', 'dist/css'], }), // nó sẽ minify file css new MiniCssExtractPlugin({ filename: "css/index.css" }), new HtmlWebpackPlugin({ title: 'Webpack React Example', inject: false, template: require('html-webpack-template'), meta: [{ name: 'description', content: 'A better default template for html-webpack-plugin.' }], mobile: true, lang: 'en-US', bodyHtmlSnippet: '<div id="root"></div>', filename: 'index.html' }) ] }); |
Now, one final step is to adjust package.json to run
1 2 3 4 5 6 | "scripts": { "watch": "webpack --watch", "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js" }, |
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