Use Webpack to build a complete scaffolding process

Configure the Babel

Since react and ES6 are used, the configuration of Babel is essential

npm install @babel/polyfill core-js@2  --save
// @babel/polyfill: Emulates an ES6 + environment, providing shippers for ES6 methods and functions
// core-js@2: @babel/preset-env implementation declares core-js version when polyfill is introduced on demand
npm install babel-loader @babel/core  @babel/preset-env @babel/preset-react  --save-dev
// babel-loader and @babel/core are core modules
// @babel/preset-env is an intelligent preset that allows you to use the latest JavaScript
// @babel/preset-react Switch JSX
Copy the code

Extension: If you are developing a library and want to implement on-demand substitution, you can use the following two tools to implement @babel/ plugin-transform-Runtime to avoid polyfill contamination of global variables and reduce the packaging volume. @babel/runtime/corejs2 is more suitable as a development tool library. It is equivalent to @babel/runtime + babel-polyfill. You don’t have to use @babel/ Runtime anymore

. Babelrc file

{
    "presets": [["@babel/preset-env", {  // Translate es6 syntax into ES5 syntax
            "targets": {
               "chrome": "67",},"useBuiltIns": "usage".// Add @babel/polyfill as needed.
            "corejs": "2",}],"@babel/preset-react",]."plugins": [
		"@babel/plugin-proposal-class-properties"]}Copy the code

1. The solution: Support for the experimental syntax ‘classProperties’ isn’t currently enabled NPM i-d@babel /plugin-proposal-class-properties and configure it in plugins. UseBuiltIns and transform-Runtime cannot be used at the same time. If transform-runtime is used, do not use useBuiltInsor

Change the webpack. Dev. Js

. module: {rules: [{
            test: /\.js$/.exclude: /node_modules/.// exclude code in node_modules
            use: [{
                loader: 'babel-loader'}],}},Copy the code

webpack-dev-server

After writing the above code and running NPM start, open index.html and you will find nothing. At this point, we need to configure a simple WEB server pointing to index.html.

/ / install webpack - dev - server
npm install webpack-dev-server --save-dev

/ / configuration webpack. Dev. Js. devServer: {contentBase: path.join(__dirname, '.. /dist')},...// Change the NPM start command
    "start": "webpack-dev-server --config ./build/webpack.dev.js"
Copy the code

Run the NPM start command to see the contents of our code. See here for more configuration for dev

Less configuration

Style using less preprocessor, then need to use less,less-loader, CSS -loader,style-loader, etc

npm install less less-loader css-loader style-loader postcss-loader --save-dev
// less-loader compiles less
// css-loader // Compiles CSS
// style-loader creates a style tag and adds CSS to it
// PostCSs-loader provides the function of automatically adding vendor prefixes. However, it needs to be used together with the autoprefixer plug-in
npm install autoprefixer --save-dev
Copy the code

Change the webpack.dev.js configuration

rules: [
  ...
      {
            test: /\.less$/.exclude: /node_modules/.use: ['style-loader',
                {
                    loader: 'css-loader'.options: {
                        importLoaders: 2}},'less-loader'.'postcss-loader'] {},test: /\.css$/.use: ['style-loader'.'css-loader'.'postcss-loader']}]Copy the code

postcss.config.js

module.exports = { // Add the CSS vendor prefix automatically
    plugins: [
        require('autoprefixer')]}Copy the code

Module hot replacement HMR

Module hot replacement also known as HMR, code updates only update the modified parts of the display. There are the following

• More convenient for style debugging
• Only the parts of the modified code are updated to improve development efficiency
• Preserve application state that is lost when the page is fully reloaded.

There are two ways to configure HMR, one is cli and the other is Node.js API. We use the second way here. If you want to know the implementation of two kinds of HMR and the implementation principle of HMR, you can see here. We implement HMR using the plugins Webpack-dev-Middleware and Webpack-hot-middleware under a custom development service

// Install webpack-dev-middleware webpack-hot-middleware
npm install webpack-dev-middleware webpack-hot-middleware --save-dev
// Don't forget to install Express, which is how we start the local service
npm install express --save-dev
Copy the code

New dev – server. Js

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require("webpack-hot-middleware")
const config = require('./webpack.dev.js');

const complier = webpack(config);   // The compiler repackages the code once it executes
const app = express();  // Generate an instance
const DIST_DIR = path.resolve(__dirname, '.. / '.'dist');  // Set the static access file path

let devMiddleware = webpackDevMiddleware(complier, {
    quiet: true.noInfo: true.stats: 'minimal'
})

let hotMiddleware = webpackHotMiddleware(complier,{
    log: false.heartbeat: 2000
 })

app.use(devMiddleware)

app.use(hotMiddleware)

// Set the path to access static files
app.use(express.static(DIST_DIR))


app.listen(8080, () = > {console.log("Successful startup: localhost:"+ 8080)})// Listen on the port
Copy the code

Change webpack.dev.js to add the following:

const webpack = require('webpack'); . entry: {Webpack-hot-middleware /client? NoInfo =true&reload=true is mandatory
        main: ['webpack-hot-middleware/client? noInfo=true&reload=true'.'./src/index.js']},... plugins: [ ... new webpack.NamedModulesPlugin(),// Used to display the relative path of the module when starting HMR
        new webpack.HotModuleReplacementPlugin(), // Enable module hot update. Different from module hot update, hot loading is the whole page refresh
    ]
Copy the code

More webpack-hot-Middleware configurations are available here

Modify the startup command:

"start": "node ./build/dev-server.js"
Copy the code

public path

By deploying resources around the world, CDN enables users to access resources nearby and speeds up access. If we upload static resources of a web page to a CDN service, publicPath will fill in the URL provided by the CDN when accessing these resources. We currently use /, as opposed to the current path, because our resources are in the same folder. ” “Webpack. Dev. Js

    output: {
        ...
        publicPath : '/'
    }
Copy the code

Production environment construction

So far we have configured webpacks for development environments. The build goals for development and production environments are very different, and in production environments, we have shifted to focus on smaller bundles, lighter source maps, As well as more optimized resources to improve load times. New webpack. Prod. Js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: "production".Tree shaking is automatically enabled whenever the code is in production mode
    devtool:"cheap-module-source-map".entry: {                  // Import file
        main: './src/index.js'
    },  
    module: {                 
        rules:... omit// Same code as dev
    },
    plugins: [                     
        new HtmlWebpackPlugin({   
            template: 'src/index.html',}).new CleanWebpackPlugin(), 
    ],
    output: {
        publicPath: "/".filename: 'bundle.js'.path: path.resolve(__dirname, '.. /dist')}}Copy the code

Add a packaging script,

    "build": "webpack --config ./build/webpack.prod.js"
Copy the code

After executing the NPM run build, you will find that a series of files have been generated in the dist folder. You’ll notice that the production configuration is much the same as the development configuration. Next we’ll tune the WebPack configuration.

CSS file code segmentation

To package our CSS files separately, we need to use the mini-CSS-extract-plugin, which currently does not support HMR, so in order not to affect the development efficiency, we use it in the build environment. Optimize – CSS-assets-webpack-plugin this plugin can help us combine the same styles. The CSS-split-webpack-plugin allows you to split large CSS files

npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin css-split-webpack-plugin --save-dev
Copy the code

Modify webpack.prod.js and synchronously modify webpack.common.js and webpack.dev.js see here

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default; . module: {rules: [{
            test: /\.less$/.exclude: /node_modules/.use: [MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader'.options: {
                        importLoaders: 2}},'less-loader'.'postcss-loader'] {},test: /\.css$/.use: [MiniCssExtractPlugin.loader, 'css-loader'.'postcss-loader']]}},optimization: {
		minimizer: [new OptimizeCSSAssetsPlugin({})]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css'.chunkFilename: '[name].chunk.css'
		}),
      new CSSSplitWebpackPlugin({
            size: 4000.filename: '[name]-[part].[ext]'})]Copy the code

File path optimization

After extension configuration, it is not necessary to add file extension name in require or import. It will try to add extension name in order to match the file name after mainFiles configuration. Alias is configured to speed up webPack’s search for modules. Webpack.com mon. Js changes:

    resolve: {       
        extensions: ['.js'.'.jsx'].// When importing a file as import login from './login/index', it looks for the.js file first, and then for the.jsx file
        mainFiles: ['index'.'view'].// If you refer to a folder directly, go back to the file that starts with index, and if it doesn't exist, go back to the file that starts with view
        // alias: {// alias:
        // home: path.resolve(__dirname, '.. / SRC /home') // Configure aliases to speed up webpack's module lookup
        / /}
    }
Copy the code

SplitChunksPlugin

SplitChunksPlugin can be used for both synchronous and asynchronous code splitting, which can separate third-party libraries from business code. Webpack.prod.js

. optimization: {splitChunks: {
            chunks: "all".// Works only for asynchronous import codes, and setting all and configuring both vendors works
            minSize: 30000.// Code splitting is done only when the imported library is larger than 30KB
            minChunks: 1.// A module is not split until it has been used at least once
            maxAsyncRequests: 5.// The maximum number of modules to load asynchronously at the same time is 5, if more than 5, no code splitting is done
            maxInitialRequests: 3.// The imported library can split up to 3 js files when loading the import file
            automaticNameDelimiter: '~'.// Generate a file link for the file name
            name: true.// Enable the custom name effect
            cacheGroups: {  // Determine where to put the split code
                vendors: {   // used with chunks: 'all' to indicate that if the library is introduced in node-modules, the library is partitioned off and vendors. Js
                    test: /[\\/]node_modules[\\/]/.priority: - 10.filename: 'vendors.js'
                },
                default: {  // Set the default store name for code that is not split from the Node-modules library
                    priority: - 20.reuseExistingChunk: true.// Avoid being repackaged and split
                    filename: 'common.js'}}}}Copy the code

PWA optimization

The PWA, which stands for Progressive Web Application, implements the ability to retrieve pages from a local cache even if the server fails. Install the workbox-webpack-plugin first and then configure it in Plugins in webpack.prod.js, since this feature is only available online.

npm install workbox-webpack-plugin --save
Copy the code

Specify the environment

Selective compilation of Webpack can be made by specifying the environment. Selective compilation means selectively making certain statements valid and disabling specific statements, depending on the environment in which the package is packaged. This allows code optimization for a specific user’s environment to remove or add important code. The simplest example is that in a development environment we print logs, but in a production environment we invalidate all statements that print logs (let the program not run the printed statements, or even pack the files that don’t contain the log statements at all) and we can use the DefinePlugin built into WebPack to do this.

// webpack.dev.js. plugins: [ ... new Webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('development'),}),]// webpack.prod.js
plugins: [
  ...
  new Webpack.DefinePlugin({
     'process.env.NODE_ENV': JSON.stringify('production'),}),]Copy the code

You can also specify the production environment with mode: production, set mode: “production”,webpack defaults to “process.env.node_env “: json.stringify (“production”). Don’t repeat Settings!

conclusion

At this point, a basic scaffolding is set up, and the entire code for this article is there. You can follow the code to configure it, and basically every step has a COMMIT, if you don’t know, you can look at the COMMIT. Of course, there are many imperfections in this paper, such as mock, ESLint, styleLint, TS, etc., which have not been added, and there are also many optimization points. Due to the lack of space, I will not write them all. I will add and improve the project in the future. Hopefully, this article will give you a deeper and more comprehensive understanding of the WebPack tool so that you can handle configuration changes in future projects. Creat-react-app or UMI are recommended if you want to use a project framework. If there are any mistakes in this article, please tell me if you find them!! Thank you very much!! If you feel helpful, welcome to give me a star! ! Thank you very much!!