©2020-2024 ioDraw All rights reserved
Webpack Is a front-end resource load / Packaging tools . It will perform static analysis based on module dependencies , Then these modules generate corresponding static resources according to the specified rules .
We can see from the picture ,Webpack Multiple static resources can be js,css,less Convert to a static file , Reduced page requests .
Global installation
npm install -g webpack webpack-cli
View version number after installation
webpack -v
（1） install webpack tool
npm install -g webpack webpack-cli
（2） establish js Files are used for packaging operations
-- file a.js function sub(a,b){ return a-b; } module.exports={ sub } -- file b.js
function add(a,b){ return a+b; } module.exports={ add } -- file style.css body{
background-color: red; } -- file main.js, Need to import files to be packaged , Direct import or associated import const a=require(
'./a.js') const b=require("./b.js") require("./style.css") document.write(a.sub(
3,2)+"---"+b.add(1,2))
（3） install css loader
npm install --save-dev style-loader css-loader
（4） Build profile
const path=require("path"); module.exports = { // Entry function entry: "./src/js/main.js"
, // Output path output: { path: path.resolve(__dirname,"./dest"), filename: "bundle.js"
}, module: { //CSS load loaders: [ { test: /\.css$/, use: ["style-loader",
"css-loader" ]} ] } };
（5） Perform packaging
webpack # Yellow warning
webpack --mode=development # File formatting after packaging
webpack --mode=production # After packaging, the file is compressed into one line
（6） Test use
establish html page , Just import the packaged file
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="
../dest/bundle.js"></script> </head> <body> </body> </html>
Technology