In this article, we will configure the Webpack-based Vue project t and React project from scratch

This article assumes that you already know about Vue and React. If you are not familiar with Vue and React, you can check baidu or follow my other articles. Of course, it’s not the same as using scaffolding (such as @vue/cli or react-create-app), but the essence is the same. You can understand scaffolding from zero.

Without further ado, let’s take it one by one

Configure the Vue project based on Webpack

Configure webPack-based Vue projects from scratch

  1. Create a project directory with the following structure

    ├ ─ node_modulesModule installation directory (automatically created when installing modules)├ ─ public# server root├ ─ distOutput directory (automatically created at build time)└ ─ SRC# source directory├ ─ componentsPublic component directory├ ─ views# page component directory├ ─ App. Vue# the root component└ ─ index. Js# import file├ ─ package - lock. Json# dependency lock file├ ─ package. Json# Project profile└ ─ webpack. Config. Js# webPack configuration file

Copy the code

  2. Install required modules and dependencies

    • Webpack related

      • webpack / webpack-cli / webpack-dev-server
      • html-webpack-plugin

    • Vue related

      • vue

    • other

      • vue-loader
      • vue-template-compiler
      • @vue/compiler-sfc

      PS: Note that the version of vue-Loader installed before vue-loader@15 relies on vue-template-compiler, and after vue-loader@16 relies on @vue/ compiler-sFC to compile. Vue single-file components. Both require separate installations, but versions after [email protected] include @vue/ Compiler-SFC, so no additional installations are required

    Install webPack-related dependencies

        npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
Copy the code

    Install the Vue. Choose one of the following based on the actual Vue version

       # Vue2 installation
   npm install vue@2
   npm install -D vue-loader@15 vue-template-compiler
   
   Vue3 is installed by default
   npm install vue
   npm install -D vue-loader
Copy the code

  3. Webpack configuration

        const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const { VueLoaderPlugin } = require('vue-loader')

    module.exports = {
        mode: 'development'.entry: './src/index.js'.output: {
            path: path.join(__dirname, './dist'),
            filename: '[name].bundle.js'.clean: true,},devServer: {
            static: path.resolve('./public')},module: {
            rules: [{test: /\.vue$/,
                    use: 'vue-loader'}},],plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve('./public/index.html')}),// make sure to introduce this plugin after vue-loader@15+!
            new VueLoaderPlugin()
        ],


    }
Copy the code

  4. Compile or start the development server

        Output to the dist directory
    npx webpack
    
    # start server
    npx webpack server
Copy the code

With the above 4 steps, you have achieved the simplest configuration of the Vue project. Of course, the above code is only the simplest effect. If there are other types of modules, you will still need to configure other Loader, Plugin and webpack configurations

Configure the React project based on Webpack

Configure the React webPack-based project from scratch

  1. Create the project directory as follows

    ├ ─ node_modulesModule installation directory (automatically created when installing modules)├ ─ public# server root├ ─ distOutput directory (automatically created at build time)└ ─ SRC# source directory├ ─ componentsPublic component directory├ ─ views# page component directory├ ─ App. Js# the root component└ ─ index. Js# import file├ ─ package - lock. Json# dependency lock file├ ─ package. Json# Project profile└ ─ webpack. Config. Js# webPack configuration file

Copy the code

  2. Install required modules and dependencies

    • react / react-dom
    • webpack / webpack-cli / webpack-dev-server
    • babel-loader / @babel/core / @babel/preset-react

    PS: Use JSX syntax in React project, need to use @babel/preset-react to compile js code that can be recognized by browser, need to install babel-loader, @babel/core since Babel is needed in webpack

  3. Webpack configuration

        const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
        mode: 'development'.entry: './src/index.js'.output: {
            path: path.join(__dirname, './dist'),
            filename: '[name].bundle.js'.clean: true,},devServer: {
            static: path.resolve('./public')},module: {
            rules: [{test: /\.js$/,
                    use: {
                        loader:'babel-loader'.options: {presets: ['@babel/preset-react']}}},]},plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve('./public/index.html')})],}Copy the code

  4. Compile or start the development server

        Output to the dist directory
    npx webpack
    
    # start server
    npx webpack server
Copy the code

    NPM Scripts can also be configured to start projects more easily

        // package.json
    {
        / /... Omit other configurations
        "scripts": {
             "build":"webpack"."dev":"webpack server"}},Copy the code

    Once configured, you can compile with NPM run build and start the development server with NPM run dev

portal

  • Webpack 5 Tutorial 1: Getting to know Webpack
  • Webpack5 tutorial 2: resource modules and loaders
  • Webpack5 tutorial 3: plugins
  • Webpack5 tutorial 4: use the server to improve development efficiency
  • Webpack5 Tutorial 5: How to Optimize WebPack packaging