Pit encountered by introducing. Vue file in webpack

Time:2020-3-15

Run program results after NPM install Vue Vue loader is executed
Pit encountered by introducing. Vue file in webpack
I asked for a Vue template compile according to the error prompt, so I installed it
implement
npm install vue-template-compiler -D
ResultPit encountered by introducing. Vue file in webpack

Where < span > Vue loader was used without the corresponding plugin. Make sure to include vueloaderplugin in your webpack config. < span >
The error indicates that a plug-in is missing. The plug-in named vueloaderplugin is missing from webpack config, which means that the vueloaderplugin plug-in is missing from webpack’s configuration file webpack.config.js, so you only need to add this plug-in.

Plug in is introduced before adding: const Vue loader plugin = require (“Vue loader / lib / plugin”);

Then create a new plug-in in plugins: plugins: [new vueloaderplugin();]

var path = require('path');
var webpack=require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var VueLoaderPlugin = require("vue-loader/lib/plugin");


module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './bundle.js'
  },
  devServer:{
    Contentbase: '. / SRC', // set the basic directory accessed by the server
    Host: 'localhost', // IP address of the server
    Port: 8080, // port
    Open: true, // automatically open the page
    hot: true
},
module:{
  rules:[
 
    {
      test:/\.css$/,
      Use: ['style loader ','css loader'] // the order of introduction is crucial and cannot be changed
    },
    //Except for what else, the conversion of syntax conversion exclude consumes CPU memory
    {
      test:/\.js$/,
      exclude:/node_modules/,
      use:'babel-loader'
    },
        {// let webpack recognize the Vue template
          test:/.vue$/,
          loader:'vue-loader'
      }
  ],
},
plugins:[
  new webpack.HotModuleReplacementPlugin(),
  new HtmlWebpackPlugin({
      template: path.join(__dirname,'./src/index.html'),
       //Reference this plug-in to generate the template address index.html; the plug-in will automatically generate the HTML file and insert the packaged JS into the file
      filename:"index.html"
  }),
  new HtmlWebpackPlugin({
    template: path.join(__dirname,'./src/second.html'),
     //Reference this plug-in to generate the template address index.html; the plug-in will automatically generate the HTML file and insert the packaged JS into the file
    filename:"second.html",
    //Chunks: [], put the JS file style introduced by entry
}),
new VueLoaderPlugin() 
]
};

So it’s running
Pit encountered by introducing. Vue file in webpack

Recommended Today

JavaScript regular expression notes

Regular expression uses a single string to describe and match a series ofA syntactic ruleString of.By someruleTo match the matching string. Different programming languages have slightly different regular expressions. Graphics tools (regular expression online tools): http://regexper.com 1、 Grammar JavaScript supports regular expressions through regexp, a built-in object. There are two ways to instantiate regexp objects: […]