Create a project

    mkdir my-vue
    cdMy-vue // generate package.json NPM initCopy the code

Install webpack

Yarn add webpack --dev // webpack4 separates webpack-cli from the command line tool. You need to manually install yarn add webpack -- cli --dev/to start the service. Yarn add webpack-dev-server --devCopy the code

Configuration webpack

  1. Create a new main.js entry file in SRC
alert('hello world! ')
Copy the code
  1. Create the webpack.config.js file in the root directory to configure the entry and exit. For details, see webPack’s official website
const path = require('path') const dev = process.env.webpack_dev_server module.exports = {// webpack does this for mode: dev?'development' : 'production',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'}}Copy the code

At this point, the most rudimentary version is built, so go for a build wave

Add the build command to package.json

"scripts": {
  "build": "webpack"
}
Copy the code
yarn build
Copy the code

After a successful build, we can see that there is a built main.js under dist

Generate HTML using htML-webpack-plugin

We have it packaged, but to run it in the browser, we need to generate an HTML file. We can use htMl-webpack-plugin, which generates HTML from a template and automatically references JS files

  1. Create a new index. HTML template file in the public folder
<! DOCTYPE html> <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
 </head>
 <body>
   <div id="app"></div>
 </body>
</html>
Copy the code
  1. The installation
yarn html-webpack-plugin --dev
Copy the code
  1. Configuration, so far, the webPack configuration file is as follows
const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin') const dev = process.env.webpack_dev_server module.exports = {// webpack does this for mode: dev?'development' : 'production',
 entry: './src/main.js',
 output: {
   path: path.resolve(__dirname, 'dist'),
   filename: 'main.js'
 },
 plugins: [
   new HtmlWebpackPlugin({
     title: 'my-vue',
     template: 'public/index.html'}})],Copy the code

After completing the configuration, build again and find that an index. HTML file is generated under dist. When opened in the browser, the popup window displays “Hello World”, indicating that the HTML automatically introduces the packaged main.js!

Configure the development environment using webpack-dev-server

We already installed webpack-dev-server when we installed webpack above, adding commands to package.json

  "scripts": {
    "dev": "webpack-dev-server"
  },
Copy the code
yarn dev
Copy the code

Then open localhost:8080 to see the result

Vue files are supported

  1. Install the Vue
yarn add vue
Copy the code
  1. New SRC/app. Vue
<template>
  <div class="app">
    {{ msg }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world! '
    }
  }
}
</script>
Copy the code
  1. Modify the import file main.js
import Vue from 'vue'
import App from "./app.vue";

var vm = new Vue({
  render: h => h(App)
}).$mount("#app");
Copy the code
  1. Install the vue – loader
yarn vue-loader vue-template-compiler
Copy the code
  1. Configure loader and Plugin (VueLoaderPlugin must be configured). The content of our configuration file is as follows
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const dev = process.env.WEBPACK_DEV_SERVER

module.exports = {
  mode: dev ? 'development' : 'production',

  entry: './src/main.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: 'my-vue',
      template: 'public/index.html'
    }),
    new VueLoaderPlugin()
  ],

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'}}}]Copy the code
  1. Rerun the
yarn dev
Copy the code

Hello World can be seen, indicating that vUE files are configured and supported!!

reference

This article can only be regarded as a record of my practice, more detailed content can be referred to the following articles, but some of the following articles are outdated, I put the outdated part listed, you can pay attention to when reading!

Webpack: From getting started to real project configuration: Babel part && extract CSS part && separate code part outdated

Webpack 4 and Getting started with single-page apps: Babel is partially outdated

Understand the splitChunks series

Cache optimization