Webpack.config.js Configuration

Const Htmlwebpackplugin = require (' Html-webpack-plugin ');module.exports = {//Portal File Configuration//Value: Object/String//Entry: './src/main.js ',entry: {//key: The name of the file when it is output//value: For file pathmain: './src/main.js '    },//Output file configurationoutput: {path: __dirname+ '/dist ',//[hash:20] random number. Ensure that the name is different and prevent the server from caching//filename: ' [name]. [Hash:20].js 'filename: ' [name].js '    },//dynamic load script tag //Processing Templatescnpm Install html-webpack-plugin-dplugins: [New Htmlwebpackplugin ({//Role of the fileTemplate: './index.html ',//Output filefilename: ' index.html '        })    ],module: {//configuration file compilation rulesrules: [//compile ES6 syntaxusing Babel-loadercnpm Install Babel-loader babel-core-dcan only parse the basic syntax, methods, functions cannot be implemented            {test:/\.js$/,//matching rules for file paths that need to be compiledexclude:/node_modules/,//removal of file pathloader: ' Babel-loader ',configuration of the//babel-loader                /*options: {//Presetsthe functions and methods of ES6 cannot be compiled:(the es6 used at compile time will provide method conversions for development projects, frameworks)cnpm Install babel-plugin-transform-runtime-dcnpm Install babel-runtime-sThe code used to insert the ES5 methodpresets: [//' env '//If a single configuration is preset, configure an array//The first value is a preset name//second value for this preset configuration[' env ', {Target: {browsers: [' >1% ', ' last 2 versions ']                            }                        }]//react, use the following, and use the other one.[' env ', ' react ']                    ],plugins: ["Transform-runtime"                    ]                }                */            },parse vue into JSInstalling Vuecnpm Install vue vue-router vuex-scnpm Install vue-loader-d (after installation note Check that the dependent module is installed)            {test:/\.vue$/,loader: ' Vue-loader '            },//Compile CSScnpm Install Css-loader style-loader-d            {test:/\.css$/,loader: ' Style-loader!css-loader '            }, //Compiling other files (PNG gif jpeg jpg TTF)Url-loadercnpm Install url-loader-d            {test:/\. (png|jpeg|jpg|ttf|gif)/,loader: ' Url-loader '            }         ]    }}

Webpack.config.js Configuration