Start with some of my broken thoughts!

We have just finished the basic webPack configuration, such as loading CSS, loading images, and so on. So this time we’ll pick up where we left off last week, and we’ll keep tinkering! I used to write projects with vue scaffolding and wondered why every time I saved it, it automatically updated the page for me! Why does the browser automatically open for me every time I start a project? I was so preoccupied with business needs that I forgot all about them. During the literacy process, I realized that the classic Webpack interview question — HotMOduleReplacement — was about this. Alas, I was too young to know webpack. This build will be the same as the previous foundation, I will first throw out the problems I don’t understand as I usually write projects, and then post all the problems I have encountered, and then post the detailed code. If any big guy walks by, please stay! Please grant instruction! Please guidance! Code full link directions 👉 github.com/xiaoshanweb…

There are three main parts of this paper

I. Load vue, react file in webpack

In the basic article, we talked about some basic configurations. But how do you configure vue, React in WebPack?

1: babel

Before we load the Vue and React files, we need to know about Babel. Babel takes non-ECMAScript 2015 languages and converts them backwards to compatible javascript. Convert our vue syntax, JSX to JS, arrow function to function, const to var, etc.

NPM install @babel/plugin-transform-arrow-functions -d To transform arrow functions Convert const to varCopy the code

One thing to note is that Babel is a stand-alone tool that is not configured with build tools such as WebPack. If there are many contents to be converted, it is impossible for us to install the plug-ins one by one, so Babel also has a concept of preset, we can directly provide a preset for WebPack, WebPack will load the plug-in according to our preset and pass it to Babel. One of the more common presets is env react TypeScript

npm install @babel/preset-env
npm install --save-dev @babel/core
Copy the code
2: Loads the React file
npm i --save-dev react react-dom
npm install @babel/preset-react -D
Copy the code

Create a babel.config.js file in the root directory of the react file. Create a babel.config

//babel.config.js
module.exports = {
  presets: [["@babel/preset-env"],
    ["@babel/preset-react"]],}//webpack.config.js
{
    test: /\.jsx? $/i,
    exclude: /node_modeuls/,
    use: {
      loader: 'babel-loader'}}//reactFile.jsx
 import React, { Component } from 'react';

export default class ReactApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      message: "Hello React"}}render() {
    return (
      <div>{this.state.message}</div>)}}//index.js
import React from 'react'
import ReactApp from './reactFile.jsx'
import ReactDOM from 'react-dom';

ReactDOM.render(<ReactApp />.document.getElementById("root"));

//index.html

<div id="root"></div>
Copy the code

rendering

3: Loads the Vue file
npm i --save-dev vue vue-loder vue-templete-compiler
Copy the code

The vue file is relatively easy to load. First build and mount the vue file.

<template>
 <div class="vue">I am a Vue file</div>
</template>
<style scoped>
.vue {
 color: red;
 font-size: 20px;
}
</style>


//index.html
<div id="app"></div>

// Mount the app.vue file in the index.js file

import Vue from 'vue'
import VueApp from './App.vue'

new Vue({
 render: h= > h(VueApp)
}).$mount('#app')
Copy the code

In webpack.config.js, vue-Loader will match all the.vue files, and VueLoaderPlugin will process all the matched vue files. However, when downloading Vue-Loader, it is important to note that the version of Vue-Loader should not be too high, just download 15.x.x version. There are two ways to introduce the VueLoaderPlugin: require(‘vue-loader/lib/plugin’) directly, or download vue-loder-plugin and reference it directly. In vue-loder-plugin, it also refers to vue-loader/lib/plugin

// const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VueLoaderPlugin = require('vue-loader-plugin')

 {
   test: /\.vue$/i,
   use: 'vue-loader'
 },
 
 new VueLoaderPlugin()
Copy the code

rendering

II. Automatic compilation

In the last article, we used the build method to see every update to the code. What method does WebPack provide to implement automatic compilation?

1:watch
Watch can listen to the changes of files, provide local service through live-server plug-in (vs plug-in), and automatically refresh the page after each file modification. Disadvantages: A: The efficiency is not very high, we still need to manually build the watch before starting; B: It recompiles all diamante, and when it is successfully compiled, it will generate new files (such as file manipulation, file, etc.)Copy the code
//package.json
"watch": "webpack --watch"./ / or webpack. Config. Js
module.exports={
    watch:true. }Copy the code
2:webpack-dev-server
  npm install --save-dev-webpack-dev-server
Copy the code

Bug highlights

2021-08-06

The first bug, which I can’t explain in my current intelligence. Webpack-dev-server version and Webpack-CLI version do not match, so the error is reported, the original version

“Webpack – cli” : “^ 4.7.2”, “webpack – dev – server” : “^ 3.11.2”

The modified version

“Webpack – cli” : “^ 3.3.12”, “webpack – dev – server” : “^ 3.11.2”