Webpack 4+ Vue-loader Configuration

Webpack 4+ Vue-loader Configuration

After writing the demo,clone down, NPM Dev can,

There may be minor changes to the configuration due to version issues, which are available temporarily

Specific configuration file in Webpack.config.js

Configuration steps can be viewed Webpack official documentation guide, very detailed

1Const Htmlwebpackplugin = require (' Html-webpack-plugin ');2Const Cleanwebpackplugin = require (' Clean-webpack-plugin ');3Const Vueloaderplugin = require (' Vue-loader/lib/plugin ');4Const PATH = require (' path ')5Const WEBPACK = require (' Webpack ')6 7 functionJoin (.... args) {//The. args appears in the parameter called the rest parameter, which is to put all the remaining arguments into an array8   returnPath.join (__dirname, .... args)//where non-function parameters appear, .... args represents the display operator, which means that the array is expanded, and the elements are placed in one place.9 }Ten  OneModule.exports = { AMode: "Development",//can improve the speed of compilation -Devtool: ' Inline-source-map ', - devserver:{ theContentbase: './dist ', -Hottrue -   }, -Entry:join ("./src/main.js"), + output: { -Path:join (__dirname, "Dist"), +FileName: "Bundle.js" A   }, at plugins: [ -     NewVueloaderplugin (),//Https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE -     NewWebpack. Namedmodulesplugin (), -     NewWebpack. Hotmodulereplacementplugin (), -     NewCleanwebpackplugin ([' Dist ']), -     NewHtmlwebpackplugin ({ inTemplate:join ('./index.html ')), -     }) to   ], + module: { - rules: [{ theTest:/\.text$/, *Use: [' Raw-loader '] $       },Panax Notoginseng       { -Test:/\.css/, the Use : [ +' Style-loader ', A' Css-loader ' the         ] +       }, { -Test:/\. (png|svg|jpg|gif) $/, $Use: [' File-loader '] $       }, { -Test:/\. (WOFF|WOFF2|EOT|TTF|OTF) $/, -Use: [' File-loader '] the       }, { -Test:/\.less$/,Wuyi Use : [ the' Style-loader ', -' Css-loader ', Wu' Less-loader '//Less-loader relies on less -         ] About       }, $       { -Test:/\.js$/, -Exclude:/(node_modules|bower_components)/, - Use : { ALoader: ' Babel-loader ', + options: { thePresets: [' env ']//Note Version issue Https://www.npmjs.com/package/babel-loader -         } $       } the     },{ thetest:/\.vue$/, theuse:[' Vue-loader ']//dependent on Vue-template-compiler, additional installation required the     } -     ] in   }, the  the}

Package and version Package.json

1 {2"Name": "Webpackdemo",3"Version": "1.0.0",4"description": "",5"Main": "Index.js",6"Scripts": {7"Test": "Echo \" Error:no test specified\ "&& exit 1",8"Watch": "Webpack--watch",9"Build": "Webpack",Ten"Predev": "NPM Install", One"Dev": "Webpack-dev-server--open" A   }, -"Author": "", -"License": "ISC", the"Devdependencies": { -"Babel-core": "^6.26.3", -"Babel-loader": "^7.1.5", -"Babel-preset-env": "^1.7.0", +"Clean-webpack-plugin": "^0.1.19", -"Css-loader": "^1.0.0", +"File-loader": "^1.1.11", A"Html-webpack-plugin": "^3.2.0", at"Less": "^3.7.0", -"Less-loader": "^4.1.0", -"Raw-loader": "^0.5.1", -"Style-loader": "^0.21.0", -"Vue-loader": "^15.2.4", -"Vue-template-compiler": "^2.5.16", in"Webpack": "^4.16.0", -"Webpack-cli": "^3.0.8", to"Webpack-dev-server": "^3.1.4" +   }, -"Dependencies": { the"Vue": "^2.5.16" *   } $}

There's a problem here.

Main.js file

Https://cn.vuejs.org/v2/guide/installation.html

An explanation of the various Vue versions is available in the official documentation, using the scene

This will involve using the template load component or render form

Webpack 4+ Vue-loader Configuration