current position:Home>Configuration Vue of webpack

Configuration Vue of webpack

2022-04-29 07:03:13Shrek

introduce vue.js

npm install vue -save
 Please add a picture description
 Please add a picture description

Run appears runtime-only error

  • runtime-only Yes, the runtime version does not contain any changes to the template templa Compilation of
  • runtime-compiler It's runtime + Compiler Version , That is, including the compilation of the template

stay webpack Add :
 Please add a picture description

el and template The relationship between templates

  • el Is used to specify the Vue To manage DOM, It can help to parse the instructions 、 Event monitoring and so on .
  • If Vue The instance also specifies template, that template The contents of the template will replace the corresponding mount el The template of .

vue File encapsulation processing

npm install vue-loader vue-template-compiler --save-dev
vue The contents of the document :
 Please add a picture description
modify webpack.config.js Configuration file for :
 Please add a picture description

plugin plug-in unit

plugin Used to deal with webpack The expansion of itself ;loader It is mainly used to convert some types of modules .

Use the tutorial

  1. adopt npm Install what you need to use plugins( some webpack Built in plug-ins do not need to be installed )
  2. stay webpack.config.js Medium plugins Configure plug-ins in

Add copyright to Plugin
stay webpack.config.js Revision in China :
 Please add a picture description

pack html

When actually publishing a project , Released is dist Contents in folder , however dist If there is no index.html file , So packaged js There's no point in waiting for the document ; Need to put index.html Package files to dist In the folder .
npm install html-webpack-plugin --save-dev
modify webpack.config.js In file plugins part :
 Please add a picture description

js Compress

npm install [email protected] --save-dev
modify webpack.config.js file :
 Please add a picture description

Set up a local server

npm install --save-dev [email protected]
webpack.config.js File configuration changes :
 Please add a picture description
package.json Of scripts To configure :
 Please add a picture description
Using this method, when the file data changes , The page content is also updated .

webpack.base.conf.js names

 Please add a picture description
When using alias, you need to use ~ Wave sign

copyright notice
author[Shrek],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204260558106513.html

Random recommended