Vue CLI built Webpack project set multi-page

1. webpack-dev-serverSettings under ( npm run dev )

./build/webpack.dev.conf.js , modify the new Htmlwebpackplugin , one instance of the page.

NewHtmlwebpackplugin ({    //file name after packagingFileName: ' index.html ',    //HTML TemplatesTemplate: './src/views/index.html ',    //Post-packaged file introduction location, [' Body ' | ' Head '], where true is equal to the bodyInjecttrue,    //Imported Entry file (entry)Chunks: [' index ']}),Newhtmlwebpackplugin ({filename:' Login.html ', Template:'./src/views/login.html ', inject:true, chunks: [' Login ']}),

2. webpack-buildSettings under ( npm run build )

Open the ./config/index.js configuration file, in the build property, the default is only one index , where you add your own other pages and their paths:

Build: {Env:require ('./prod.env '), Index:path.resolve (__dirname,‘.. /dist/index.html '),//Index pageLogin:path.resolve (__dirname, ' ... /dist/login.html '),//Login PageAssetsRoot:path.resolve (__dirname, ' ... /dist '), Assetssubdirectory:' Static ', Assetspublicpath:‘/‘,//the multilevel path can be configured here, for example {hostname}/admin/xxx can be written here as '/admin/'Productionsourcemap:true, Productiongzip:false, productiongzipextensions: [' JS ', ' CSS '], BundleAnalyzerReport:process.env.npm_config_report}

Open the ./build/webpack.prod.conf.js , modify the new Htmlwebpackplugin , and, similarly, Dev, an instance of the page.

NewHtmlwebpackplugin ({//Note Modify the Config.build.index, corresponding to the above configFilename:process.env.NODE_ENV = = = ' testing '? ' Index.html ': Config.build.index,//Template file PathTemplate: './src/views/index.html ', inject:true, minify: {//Delete a commentRemovecomments:true,        //Remove SpacesCollapsewhitespace:true, Removeattributequotes:true        //more properties See        //https://github.com/kangax/html-minifier#options-quick-reference      },      //Package The file, note that the public file (name in Commonschunkplugin) is placed in frontChunks: [' Manifest ', ' Vendor ', ' Index '],      //necessary to consistently work with multiple chunks via CommonschunkpluginChunkssortmode: ' Dependency '  }),  NewHtmlwebpackplugin ({Filename:process.env.NODE_ENV= = = ' testing '? ' Login.html ': Config.build.login, Template:'./src/views/login.html ', inject:true, Minify: {removecomments:true, Collapsewhitespace:true, Removeattributequotes:true}, chunks: [' Manifest ', ' Vendor ', ' login '], Chunkssortmode:' Dependency '  }),

3. css-loaderWithout configuration, the configuration will cause the package to not be found and vue-cli has been configured automatically.

　　Webpack precautions

• • NPM Init , generating the package.json file.
  • Less @import '. /xxxx.less '; , the end must be semicolon, the path is the same directory needs ./xxx.less .
  • If cannot find element is present: #app error, you need to configure html-webpack-plugin in the Webpack.config.js file The inject property is body .
  • The entry property of the webpack.config.js configuration file, packaged as a JS file for an array or string, and json packaged as multiple JS files for the object, key [name] placeholder The value.
  • Use less to install less , Less-loader .
  • The output property of the webpack.config.js configuration file, path:path.resolve (__dirname, ' dist ') , is the location where the file is stored, filename: ' js/[name].bundle.js ' , Is the package after the file name, publicpath: ' http://webpacktest.nat123.cc ' is the application of the domain name after the launch, so that the introduction of HTML files have hostname,:

• • package.jsonIn the configuration file, scripts properties can configure the webpack packaging settings: "webpack": "webpack --config webpack.config.js --progress --display-modules --display-reasons --colors" .

Reference blog: Webpack Front-end build Tool Learning Summary

Vue CLI built Webpack project set multi-page