One: Concept
Essentially, webpack is a static module bundler for modern JavaScript applications.
When webpack processes an application, it recursively builds a dependency graph that contains every module the application needs, and then converts all
All files are processed by webpack to generate html,css, pictures, js modules and package them into one or more bundle s. As shown below:
Two: installation
1. Create a package with files
1. Global installation
npm install -g webpack webpack-cli
2. Check the version number after installation
webpack -v
3. Initialization project
1. Enter the webpack directory and execute the project file environment
npm init -y
2. Create the src folder
3. Create herder.js under src
var header = document.createElement("div");
header.innerHTML = "Hello webpack5.0";
header.className="active";
export default header;
4. Create index.js under src
import header from './header'
import './assets/base.css'
// import image
import pic from './assets/pic4.png';
document.body.appendChild(header);
// Create a picture
var img = document.createElement("img");
img.width="500";
// Specify image size and src
img.src = pic;
// Insert into body
document.body.appendChild(img);
import pic2 from './assets/sun.jpeg';
var img2 = document.createElement("img");
img2.src = pic2;
document.body.appendChild(img2);
Fourth, JS packaging
1. Create a configuration file webpack.config.js in the webpack directory
The following configuration means: read the content of main.js (entry file) in the src folder of the current project directory, analyze resource dependencies, package the relevant js files, and put the packaged files in the dist folder of the current directory. , the packaged js file is named bundle.js
const path = require("path"); //Node.js built-in modules
module.exports = {
entry:'./src/index.js',//Entry (from which file webpack starts running)
output:{
path:__dirname+'/dist', //directory, __dirname the current absolute directory
filename:'main.js',//Packaged js file name
},//Export,
}
2. Configure the npm run command of the project and modify the package.json file
"scripts": {
"build": "webpack",
}
Run npm command to execute packaging
npm run build
3. Create a folder dist in the webpack directory, and create index.html under dist
reference bundle.js
<body>
<script defer="defer" src="dist/bundle.js"></script>
</body>
4. View index.html in the browser
5. CSS Packaging
**1, loader loader
Install style-loader and css-loader
Webpack itself can only deal with JavaScript modules, if you want to deal with other types of files, you need to use the loader for conversion.
Loader can be understood as a converter of modules and resources.
First of all, we need to install the relevant Loader plugins, css-loader is to load css into javascript; style-loader is to let javascript know css and insert css into style tag
npm i style-loader css-loader -D
2. Modify webpack.config.js
const path = require("path"); //Node.js built-in modules
module.exports = {
//...,
output:{},
module: {
rules: [
{
test: /\.css$/, //Packaging rules are applied to files ending in .css
use: ['style-loader', 'css-loader'] //Use two loader s
}
]
}
}
3. Create assets in the src folder and create style.css under assets
.active{
background-color: #f70;
color:#fff;
}
4. Modify .js under src
Introduce style.css on the first line
import './assets/base.css'
5. View index.html in the browser
See if the background changes color?
6. Load the file
Since files like .png are not a JavaScript module, you need to configure webpack to use file-loader or url-loader to handle them appropriately.
The benefits of converting resource URL s are:
file-loader can specify where to copy and place resource files, and how to use version hash naming for better caching. Additionally, this means that you can manage image files nearby, and you can use relative paths without worrying about deploying URL s. With the correct configuration, webpack will automatically rewrite the file paths to the correct URL s in the bundled output.
url-loader is based on file-loader. If the file is relatively small, it is converted to base64 format to reduce the number of http requests. If the file is larger than the threshold, it will be automatically handed over to the file-loader for processing.
Install: npm i file-loader url-loader -D
Modify webpack.config.js
const path = require('path')
module.exports = {
entry:'./src/index.js',//Entry (from which file webpack starts running)
output:{
path:__dirname+'/dist', //Table of contents
filename:'main.js',//Packaged js file name
},//Export,
mode:"production",//Mode Product mode, production, development mode development
module:{
// rule
rules:[
// When encountering files ending with .css, use style-loader and css-loader
{"test":/\.css/,use:["style-loader","css-loader"]},
{
"test":/\.(png|jpg|jpeg|svg|ico|bmp|gif|webp)/,
use:[
{loader:"url-loader",options:{
name:"img/[name].[ext]",
// Pack base64 if less than 10k
limit:10240,//If the file is less than 3k convert to base64 code format
}}
]
}
]
},
}
Six: devServer local server
1. Role: start a server locally
2. Installation
npm i webpack-dev-server
3. Configuration
- Modify in webpack.config.js
//Modify in webpack.config.js
devSever:{
host:"localhost", //local domain name
port:"8080", //The port number
hot:true, //Hot update
open:true,//Open browser automatically
proxy:{},//Proxy, the same as the proxy configuration in vue.config.js
}
- Modify in package.json
//package.json
"script":{
"serve":"webpack serve"
}
4. Run
npm run serve
Seven: plugins plugin
1. Function: package, compress, and clean up during the webpack running process
2. Use
- 2.1 html-webpack-plugin Copy the packaged js of the template html plugin to the dist directory
//01 Installation
npm i html-webpack-plugin
//02 Import
const HtmlWebpackPlugin = require("html-webpack-plugin")
//03 Use, modify in webpack.config.js
plugins:[
// Instantiate the plugin (insert public index.html into main.js (packaged file) and copy it to the dist directory)
new HtmlWebpackPlugin({template:"./public/index.html"})
]
- 2.2 CleanWebpackPlugin cleans the /dist folder
install npm i clean-webpack-plugin -D
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist'],
}),
]
- 2.3 Optimize optimizes the css plugin
Install optimize-css-assets-webpack-plugin -D
//import
const optimizecss = require('optimize-css-assets-webpack-plugin')
//use
plugins: [
//use
optimization:{//Optimization options
minimizer:[new optimizecss()],
}
//2. Use plugins
new miniCssextractPlugin({
filename:"style-[hash:7].css"
}),
]
- 2.4 ExtractTextPlugin extracts css styles
The main purpose of this plug-in is to extract the css style and prevent the page style loading disorder caused by packaging the style in js.
install npm i mini-css-extract-plugin -D
//import
const miniCssextractPlugin = require('mini-css-extract-plugin')
//use
plugins: [
//1. Use loader
use:[miniCssextractPlugin.loader,"css-loader"],
//2. Use plugins
new miniCssextractPlugin({
filename:"style-[hash:7].css"
}),
]