Webpack overview
webpackIs a modern JavaScript applicationStatic module bundler )
What does webpack do
-
grammatical transformation
- Convert less / sass to CSS
- ES6 to Es5
- Converting typescript to JS
- Compression and merging of HTML / CSS / JS code (packaging)
-
Webpack can provide a development environment during development
- Automatically open browser
- Automatically monitor file changes
- Automatically refresh browser
- Projects generally need to be packaged by webpack before they go online.
Webpack module description
Webpack treats all resources as modules
- css
- js
- picture
- Font Icon
Webpack provides a modular development environment for front-end development
- For JS files, webpack supports AMD, CMD, commonjs, ES6 modularization and other grammars
- With webpack, we can use arbitrary modular syntax in front-end code
- The modular syntax of nodejs can be used in browsers
const $ = require('jquery')
Webpack basic usage
- Create a folder
webpack-demo
- Initialize project generation
package.json
yarn init -y
- Install the dependency package of webpack
yarn add webpack webpack-cli -D
- new file
src
anddist
Folder,, SRC is used to provide source code, and dist is used to store packaged files - Created under SRC
index.js
Document, purpose: tosrc/index.js
Package files - In package The JSON file configures the packaged script
"scripts": {
"build": "webpack --config webpack.config.js"
}
- In the root directory of the project, create a file
webpack.config.js
- Execute package command
yarn build
Configure the packaging entry of webpack
- stay
webpack.config.js
In the file
//This is the configuration file of webpack
//Webpack runs in the node environment. Webpack can execute any node code, including modules in node.
module.exports = {
//Default:/ src/index. js
entry: './src/app.js'
}
Configure the packaging exit of webpack
Configure the exit of the final packaged file of webpack
//Configure webpack packaging exit
output: {
//Path: the directory of the package export. The default is dist. the absolute path must be specified
path: path.join(__dirname, 'lib'),
//Filename: the file name of the package export. The default is main js
filename: 'bundle.js'
}
==If you want to configure path, remember that it is an absolute path==
Configure the packaging mode of webpack
//Packaging mode development | production
//Development: packaging will not compress the package
//Production: packaging will compress the code
mode: 'development'
Configuring the HTML webpack plugin
The HTML webpack plugin can help us automatically generate an HTML file in dist and automatically help us import the packaged file.
- Install the HTML webpack plugin
yarn add html-webpack-plugin -D
- stay
webpack.config.js
Medium configuration
//1. HTML webpack plugin import
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 2. The plug-in for configuring webpack is an array
plugins: [new HtmlWebpackPlugin({
//Template for generating HTML
template: './src/index.html'
})
Configure CSS loader to process CSS files
Webpack can only handle JS files naturally. If you need to handle other types of files, you need to configure loader
- Install dependent packages
yarn add css-loader style-loader -D
- Configure loader
module: {
rules: [
//Rules for configuring CSS loader
{
//Match all CSS end file
test: /\.css$/,
//Handling with CSS loader and style loader
use: ['style-loader', 'css-loader']
}
]
}
==Note: the loader is loaded from right to left==
Loader less profile processing
- Install dependent packages
yarn add less-loader less -D
- Configure less loader
//Rules for configuring less loader
{
//Match all Less ending file
test: /\.less$/,
//Handling with CSS loader and style loader
use: ['style-loader', 'css-loader', 'less-loader']
}
Configure file loader to process pictures
- Install dependent packages
yarn add file-loader -D
- Configure file loader
//File loader configuration
{
test: /\.(png|jpg|gif)$/,
use: 'file-loader'
}
Configure URL loader to handle pictures
- install
yarn add url-loader file-loader -D
- Configure URL loader
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 20 * 1024
}
}
}
Configure font icons and audio and video
//Font Icon
{
test: /\.(eot|svg|ttf|woff)$/,
use: {
loader: 'url-loader',
options: {
limit: 20 * 1024
}
}
},
{
test: /\.(mp3|mp4|ogg)$/,
use: {
loader: 'url-loader',
options: {
limit: 20 * 1024
}
}
}
Configure Babel loader
Babel can convert the high version of JS syntax into the low version of JS syntax to ensure the same running effect. Compatible with more browsers.
- Install dependent packages
yarn add babel-loader @babel/core @babel/preset-env -D
- Configure Babel
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
Extract CSS into a separate file
- Install plug-ins
yarn add mini-css-extract-plugin -D
- Plug in configuration
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//Configure plug-ins
plugins: [
new MiniCssExtractPlugin({
//Specify the generated CSS file name and path
filename: './index.css',
})
],
- Configure loaders for CSS and less
{
test: /\.css$/,
//CSS loader only enables webpack to process CSS files
//Style loader: it can add the processed CSS code to the page
// MiniCssExtractPlugin. loader ; Extract CSS into a separate CSS file
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
Use of webpack dev server
Webpack dev server is not used for packaging, but for starting a server. When our code changes, webpack dev server will repackage (memory) and refresh the browser to see the effect in real time
The latest version of webpack5 does not support it yet and needs to be downgraded
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
- Installation package
yarn add webpack-dev-server -D
#Note: if you need to use webpack dev server, you cannot use the latest version of webpack 5. Instead, you should use webpack 4
- Configure a script
"scripts": {
"build": "webpack --config webpack.config.js",
"serve": "webpack-dev-server --config webpack.config.js"
},
- Using dev script
yarn serve
- Common configuration
//Configuration of devserver
devServer: {
//Custom port
port: 9090,
//Automatically open browser
open: true
}
Webpack processing Vue files
- New one
App.vue
file
<template>
< div class = "app" > I'm the root component -- {{MSG}} -- < demo > < / demo > < / div >
</template>
<script>
export default {
data() {
return {
msg: 'hello'
}
},
}
</script>
<style>
.app {
background-color: red;
}
</style>
- In main Import in JS
App.vue
Root component and render as root component
import Vue from 'vue'
import App from './App.vue'
const vm = new Vue({
el: '#app',
//Render app components as root components
render: c => c(App),
//Render app as root component
// render: function(createElement) {
// return createElement(App)
// }
})
- An error is reported because webpack cannot process Vue files
- Install dependent packages
yarn add [email protected] vue-template-compiler -D
- On webpack config. Configuring Vue loader in JS
const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins: [
new VueLoaderPlugin()
],
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
configuration file
/*Configuration of webpack*/
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
//Packaging entrance
entry: './src/main.js',
//Packing exit
output: {
//Configuration file
filename: 'app.js',
//Configure the default packaging exit path,,, which must be an absolute path
// path: path.join(__dirname, 'lib')
},
//Packaging mode
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin()
],
module: {
rules: [
//Handling CSS
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 20 * 1024
}
}
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
devServer: {
open: true,
port: 8888
}
}
My blog:http://hellozhb.top/