The process of introducing js into html in Vue cli

How does Vue cli import js file into index.html through webpack?
When a new user of vue writes a project with vue cli, he will find that index.html in the project directory does not introduce any js through the tag. Index.html is as follows:

<!DOCTYPE html>
<head>
</meta charsets="utf-8">
</meta name='viewport' content='width=device-width,user-scalable=no,scalable=1.0'>
<head>
<body>
  <div id="app"></div>
<body>
</html>

So how did you introduce js? First, open package.json and find script

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
},

Execute the command npm run dev, and you will see that the vue project you created is started. So step by step, execute this command. You need to find the file webpack.dev.conf.js and open it
We see

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

It introduces a lot of plug-ins. Here we just look at two, no matter what else, webpack.base.conf; HTML webpack plugin
Open webpack.base.conf.js, and we can see

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },

The entry file points to main.js and opens main.js, as follows

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from "./store"
import echarts from 'echarts'

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts 
Vue.use(ElementUI)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

Here we bind the element with id as app, and then we open the second file html webpack plugin, which helps us to configure the introduction of JS file in html file. With this plugin, we don't need to introduce JS file in such a silly way as adding tags to html. In node modules, open index.js

function HtmlWebpackPlugin (options) {
  // Default options
  this.options = _.extend({
    template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,

We find that there is index.html, so through a series of complex relationships, we can conclude that after the command is started, the main.js is determined to be the entry of the app through the webpack file, and the main.js is bound to index.html through id

Tags: Webpack Vue npm JSON

Posted on Wed, 15 Apr 2020 11:09:16 -0700 by justinh