©2020-2024 ioDraw All rights reserved
<> What is? Webpack?
Webpack Is an open source front-end packaging tool .Webpack It provides a modular development mode which is lack of front-end development , Consider various static resources as modules , And generate optimized code from it .
Webpack It can be downloaded from the terminal , Or change webpack.config.js To set up various functions . To use Webpack Installation before installation
Node.js.( The above introduction is from Baidu , Looking at the words of muddleheaded force, you can see my own summary below )
Webpack It's a front-end automation tool , With it, we can greatly improve the efficiency of writing projects , For example, you can css,js The file is compressed automatically , hold sass The code is automatically parsed into the corresponding css file , Let your code and style real-time display on the browser and so on , of course , We use webpack The ultimate goal of the project is to package after the project is completed ,webpack It's not mandatory AMD perhaps CMD One of the options , It allows you to access the project painlessly by compatible with all modular solutions , Yes webpack, You can choose any modularization you like , As for how to deal with the dependency between modules and how to package on demand ,webpack I'll take care of it for you .
<>Webpack The core concept of
<> in use webpack before , We must first understand its core concept
*
<>entry entrance
webpack The packaging starts from the entry file , The entry file is the first file to use
*
<>output output
Which folder does the file output to when it is packaged , All the packaged file names are set here
*
<>loader loader
because webpack It can only be compressed js file , So when we need to deal with other things that are not js File time , You need to install the corresponding loader
*
<>plugins plug-in unit
Plug ins enable webpack Carry out a wider range of tasks , such as :
1. Packaging Optimization
2. compress
3. Redefining variables in the environment
4. Make generated js Automatic introduction html page
Using a plug-in It only needs require it . Then add it to the plugins Array . Most plug-ins can options To define .
be careful ： If you use the same plug-in multiple times in a configuration file , It's time to go through new Operator to rebuild a new instance .
<> How to use webpack yes vue Package existing projects
* stay vue.config.js in module.exports={ publicPath:'./', // Set relative path assetsDir:'./',
// Set relative path devServer:{ } }
* On route router Inside index.js in const router=new VueRouter({ routes, mode:'hash'
//hash pattern })
* package.json Add in "scripts":{ "serve":"vue-cli-service serve", // How to start npm
run serve "build":"vue-cli-service build" // How to package npm run build }
Technology