Webpack Vue environment configuration

Initialize the project

npm init -y
Copy the code

Create a directory

Catalog explained

  • Build: stores the configuration file
    • Webpack.common. js: common configuration
    • Webpack.dev.js: development environment configuration
    • Webpack.prod. js: production environment configuration
  • Dist: Store packaged project files
  • SRC: Stores the source code file
    • Assets: page resources file (IMG, CSS file, JS file)
    • Components: VUE common components
    • Router: vue routing system file
    • Store: vuex file
    • Main.js: page entry file
  • Index.html: home page template file
  • Postcss. Config. Js: JavaScript into CSS code

Install the basic loader

The loader is divided into several categories

  • Webpack utility class -d installation (project local development dependency)
    • Webpack: Webpack core
    • Webpack-cli: provides related Webpack commands
    • Webpack-dev-server: Enable development mode, enabling technologies such as hot updates
    • Webpack-merge: Merges the configuration of multiple Webpacks
    • Clean-webpack-plugin: Every time a file is packaged, the case is the original packaged file
    • Html-webpack-plugin: Template HTML file to configure the project
  • Basic Loader-D installation (project local development dependency)
    • Node-sass: Sass editor in node environment
    • Sass-loader: loads SCSS files
    • CSS – loader: load the CSS
    • File-loader: loads various files
    • Style-loader: configure inline styles
  • Babel Transfer type -d installation (project local development dependency)
    • babel-loader
    • @babel/core
    • @babel/polyfill
    • @babel/prest-env
  • Compatibility tool -D installation (Project local development dependency)
    • Postcss-loader: CSS style compatible
    • Autoprefixer: Preprocessing of the above tools
    • Html-withing -loader: if a template file has images, it can be moved to a specified directory
  • Vue-dependent -S installation (production environment dependent)
    • Vue: Core framework
    • Vue-loader: loader for. Vue files
    • Vue-router: indicates the routing module of the VUE
    • Vue-template-compiler: vUE template compiler
    • vuex: vuex

npm i webpack-dev-server -DInstall this tool into your project’s local development dependency

Error: Cannot find module ‘webpack-cli/bin/config-yargs’

The reason is that the webpack5.x version is incompatible with the webpack-dev-server3.x version. Need to downgrade

Specific configuration

webpack.common.js
let path = require('path') // Prepare for the following file path related business
let htmlWebpackPlugin = require('html-webpack-plugin')
let VueLoaderPlugin = require('vue-loader/lib/plugin') // Import vue-loader plug-in

// Configure basic packaging information, such as entry, exit, project base file loader plug-in
module.exports = {
  entry: {
    // Use the path module's resolve function to integrate the current webPack configuration file into an absolute path
    // The file name is bundle.js
    bundle:path.resolve(__dirname,".. /src/main.js")},output: {
    // The final package is placed in the dist directory
    path: path.resolve(__dirname, '.. /dist')},module: {
    rules: [{test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/.// Exclude modules referenced by the node_modules directory
        use: [
          {
            loader: "babel-loader".options: {
              / / pretreatment
              "presets": [/ / pretreatment
                [
                  "@babel/preset-env",
                  {
                    useBuiltIns: "usage" // Use it to escape it}]}}]}, {test:/\.(png|jpe? g|gif|svg)$/,
        use: [
          {
            loader: "file-loader".options: {
              outputPath: './image'.name:"[name]_[hash].[ext]".esModule: false
              // When the template file contains images, it can also be moved to the above directory}}]}, {test: /\.(css|scss)/,
        use: [
          'vue-style-loader'.'css-loader'.'postcss-loader'.'sass-loader']]}},plugins: [
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, '.. /index.html')}),new VueLoaderPlugin()
  ],
  resolve: {
    // You can omit the suffix of the file
    extensions: ['.js'.'.json'.'.vue'.'.scss'.'.css']}}Copy the code

webpack.dev.js

let merge = require('webpack-merge')
let commonConfig = require('./webpack.common')
let webpack = require('webpack')
let path = require('path')

const devConfig = {
  mode: "development".devtool: 'inline-source-map'.devServer: {
    contentBase: path.resolve(__dirname, '.. /dist'),
    port: 8080.// Local emulation server port
    open: true.// Run the development environment and open the browser
    hot: true./ / hot update
    hotOnly: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // Enable hot updates]}module.exports = merge(commonConfig, devConfig)
Copy the code

webpack.prod.js

const marge = require('webpack-merge')
const commonConfig = require('./webpack.common')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");// Each time a file is packaged, the contents of the last package are cleared

const prodConfig = {
  mode: 'production'.devtool: 'source-map'.plugins: [
    new CleanWebpackPlugin()
  ]
}

module.exports = marge(commonConfig, prodConfig)
Copy the code

main.js

import Vue from "vue";
import App from "./App";

new Vue({
  el: "#app".render: h= >h(App)
})
Copy the code

App.vue

<template> <div id="app"> <h1 class="title"> {{msg}} </h1> <img src="./assets/images/5d0d3329493f1390f04e33c324a2c66.jpg" alt=""> </div> </template> <script> export default { name: "App", data(){return{MSG: 0, data: []}}, methods: { request () { return new Promise((res, rej) => { res({ data: 1})})}, // Pretend when axios request fn () {new Promise((res, Rej) => {res(this.index)}).then((index) => {this.request().then((requestData) => { requestData['clickIndex'] = index this.data.push(requestData) }) }) } } } </script> <style lang="scss"> @import "./src/assets/css/app"; .title{ text-align: center; color: aquamarine; } </style>Copy the code

index.html

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
Copy the code