Webpak Basic Configuration (Getting Started)
The original intention of writing this is to improve myself, there is a good summary of the basic configuration of Webpack that I have learned recently, so I will start from the very beginning [NPM init-Y]. Hope to help feel webpack is very mysterious, but do not know what is a small partner a good prefix!
👉👉👉 best not to look at here, just follow my train of thought
1. Initialization
> First NPM init -y initialization > NPM I webpack webpack-cli -d --> Then file install local webpackCopy the code- And then basically you have this display here that says initialization is done
Create a file
Create the SRC folder SRC | - js | -- index. Js - > this directory hierarchy index. The HTMLCopy the code
Create command to call webpack
1. Create a sum.js file in the js folder, write a function method and export it
2. Create squre. Js file under js file, write a function and export it
3. Reference and call the method in the index.js file
The terminal will type in webpack execution, say it was successfully packaged and output a dist folder with a main.js file in it, reference the main.js file in it, and open f12 and you’ll see that the console will print the result of the rewind method
Here we use es6 import and Command JS import methods respectively, and then execute Webpack and it executes successfully, so one of the functions of Webpack here is to unify the modularity.
Iv. Entry/output
1. Open package.json create command --> to use NPM run build to execute webpackCopy the code
2. Create the webpack.config.js configuration file for webpack outputCopy the code
3. Configure input and output ports in the reentryCopy the code
4. At this time, execute NPM run build ----> delete dist package firstCopy the code
Since we changed the name of the output file, our index. HTML file import direction has to be changed
Then you're done with the input and output of the file packaging! The webpack.config.js file is only recognized by webpack by default, we can also change the name, After setting up the webpack.config.js file, change the default webpack.config.js file to your own name and delete the dist folder and run NPM run build Then open index.html and if the page prints normally, you're doneCopy the code
Five, the loader
1. What is loader?
Webpack can only recognize.js and JSON, so it needs loader to convert files, so that WebPack can recognize, without error, to support file conversion.
2. css-loader
Create the test.js file in the js folder and create the element with the class name title 
Then create the CSS folder, create test.css, write the previous title style, and import the test.js file
Run NPM run build and you will see that it has an error and then pull up and see that we are missing a loaderCopy the code
So install NPM I CSS-loader-dCopy the code
Cs-loader can change CSS styles into files that can be recognized by Webpack, but will not insert them into the page. It inserts the write style into the head, inline
3. style-loader
Install NPM I style-loader -dCopy the code
Then run NPM run build, open index.html and you’ll see that the style is executed, and then open F12 and you’ll see that the style is displayed in the head, so the purpose of Tyle-Laoder is to identify csS-Laoder as a file that webPack can recognize. Insert into the head of the page, inline
4. less-loader
Install NPM I less less-laoder -dCopy the codeCreate a less file and write the title style in it, and then import it in the test.js file
Then run the command NPM run build to open the page and you will see that the style of the less file is in effectCopy the code5. Postcss – loader, browserslist
Then command the terminal to run NPX Browserslist and you'll see webpack go to the browser and get back the default compatible version of the browserCopy the codeHere’s how you configure it in package.json, but usually you create a.browserslistrc file that’s maintained separately for extension, so you have the origin of browserslistrc, so you can change 1% of it, you can change it to 0.01%, which is 0.01 percent bigger than the market browser, Then run NPX Browserslist, and you’ll see the version you’ve set
So postCSS-Laoder is just a starting point, just finding things that are compatible with the version number that you’re currently setting up to return to find things that need to be compatible with the browser prefix, and you have to configure autoprefixer if you want it to work in front of the code, but here we’re using a default, This is integrated with the Autoprefixer plug-in,post-preset-envAnd maintain a separate file postcss.config.js that integrates common CSS plugins
npm i postcss-loader postcss-preset-env -D
Copy the code
6. file-loader
This loader is used to stuff images into the packed file
npm i file-loader -D
Copy the codeCreate images.js and write the image in the js folder, import it to index.js, and run NPM run build
If the file loader is not configured with default, you can add esModule:false to the configuration, and then continue to run NPM run build. Open the page and you can still see the image effect
7.url-loader
It’s the same as File-Laoder, except that url-Laoder converts the image to base64 and inserts it directly into the code. When you open the dist folder that was packaged with file-Laoder, you will see an image file, but after urL-Laoder is packaged, there is no image file
Install NPM I url-loader -d and delete dist package, then execute NPM run build and open dist package. You will find that there is only one core JS file without the previous image. If you open the index.html page, you will find that the page still has an image, which is called url-loader. This can reduce the number of server requests, but it will make the package too large. Url-loader is integrated with file-loader, just add a limit to itCopy the code
Sixth, the plugin
Loader is only used to convert files, so that the original only js, JSON support webPack for more support, but plug-in is different, in the life cycle of webPack will broadcast many events, plugin can listen for these events. Change the output through the API provided by WebPack when appropriate
1. Difference between Loader and plugin
1. Loader is a converter
Compile file A to form file B. The operation here is A file, for example, convert A.css to A.CSS. This is A simple file conversion process.
2. Plugin is a plug-in extender
For the process of Webpack packaging, it does not operate on files directly, but works based on the event mechanism, listening for some event hooks in the Process of Webpack packaging, to perform tasks. Plugins are more powerful than Loaders. Plugins provide access to compliler and compilation processes and hook interception of Webpack execution.
2. cleanWebpackPlugin
The main thing to do is to empty the dist package you packed during the NPM run build
npm i clean-webpack-plugin -D
Copy the code
Then create a random file in the dist folder and run NPM run build to see if it clears the file
3. htmlWebpackPlugin
Copy the template index.html
npm i html-webpack-plugin -D
Copy the code
And then you run NPM run build and now you have the HTML for that template that you're outside in your dist directoryCopy the code4. copyWebpackPlugin
Hearing the name, you will know that this must be copying a file to dist. The setting here is that sometimes there is no need to convert some ICONS, just use them as they are
npm i copy-webpack-plugin -D
Copy the code
Dist file (dist) : copy xxw.js to dist file (dist) : copy xxw.js to dist file (dist) : copy xxw.js to dist file (dist) : copy xxw.js to dist file (dist) : copy xxw.js to dist file (dist) : copy xxw.js to dist file (dist) : copy xxw.js to dist file (dist
The basic configuration has been written, if someone thinks where I write is not fine enough or where is wrong, welcome private chat I comment, ha ha ha, we study together, have to roll together! If it is helpful, please leave a like! Qian qian ding