Install dependencies

npm i -D webpack webpack-cli babel-loader @babel/core @babel/preset-env html-webpack-plugin vue-loader vue-template-compiler webpack-dev-server css-loader style-loader url-loader postcss-loade

Document describing

Index.html // Template file (html-webpack-plugin)

Main.js // Preset file (babel-loader @babel/ core@babel /preset-env ES6 syntax)

Webpack.config. js // webpack configuration (webpack webpack-cli webpack-dev-server css-loader style-loader url-loader postcss-loade)

Vue // vue instance (vue-loader vue-template-compiler)

index.html

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The soul of the worker</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>
Copy the code

webpack.config.js

const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development'.// Specify the developer packaging mode
  entry: './src/idex.js'.// Import file
  output: { filename: 'index.js'.path: __dirname + '/dist' },
  module: {
    rules: [{
      /* Transcode js files to es5*/
      test: /\.js? $/, use: { loader: 'babel-loader'.options: { presets: ['@babel/preset-env'}}}, {test: /\.vue$/, use: [{
        loader: 'vue-loader'.options: {
          compilerOptions: { preserveWhitespace: false},}}]},plugins: [
    new HtmlWebpackplugin({
      filename: 'index.html'.// The packaged file name, default index.html
      template: path.resolve(__dirname, 'index.html') // Import the packaged file template}),
    }), 
    new VueLoaderPlugin() 
  ]
}
Copy the code

main.js

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

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

App.vue

<template>
  <div id="app"></div>
</template>
<script>
export default {}
</script>
Copy the code
reference

Juejin. Cn/post / 684490…