- Understanding of Webpack
- Core Concept of Webpack (understand to usage and how to use)
- Application
Compiler for js, based on ES6, converted for use in various browsers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>install</title>
</head>
<body>
<script>
// 1. What is Node.js and npm
// Node.js is a platform or tool that corresponds to the browser
// JavaScript on the backend = ECMAScript + IO + File + ... Server-side operations such as
// npm: node package management tool
// npm install
// 2. Installing Node.js (from web then check:)
// node -v
// npm -v
// 3. Initialize the project
// npm init -> package.json (details as pic below)
// 4. Install the required packages for Babel
// npm install --save-dev @babel/core @babel/cli
// recommend as below as the package will not change version by author update version
// npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5
// npm install again
// we can send jason to others, and use terminal with npm install, then files install by itself
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Compiling ES6 Code with Babel</title>
</head>
<body>
<script>
// https://babeljs.io/setup
// 1. Execute the compiled commands
// Add the command to execute babel in the package.json file
// babel src -d dist
// means from original src out ro dist by dir //babel src --out-dir dist
// npm run build
// Babel's configuration file
// .babelrc
// npm install @babel/preset-env@7.11.0 --save-dev
// Create the configuration file .babelrc and configure
// {
// "presets": ["@babel/preset-env"]
// }
</script>
</body>
</html>build src folder, and babel.js in src folder
"use strict";
require("./index.js");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var name = 'Alex';
var age = 18;
var add = function add(x, y) {
return x + y;
};
new Promise(function (resolve, reject) {
resolve('成功');
});
Array.from([1, 2]);
var Person = function Person() {
_classCallCheck(this, Person);
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Webpack meaning</title>
</head>
<body>
<!-- <img src="./img/logo.png" alt="" /> -->
<script>
// 1. Getting to know Webpack
// webpack is a static module packager that packages all these modules into one or more files when webpack processes the application
// import '. /module.js'
// require('. /module.js')
// 2. What is Webpack
// Modules
// webpack can handle js/css/images, icons fonts and other units
// Static
// js/css/images/icons fonts etc. files that exist locally during development are static
// dynamic content, which webpack has no way to handle, only static
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Webpack Demo</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
<!-- <script src="./src/index.js" type="module"></script> -->
<script>
// 1. Initialize the project, using npm
// npm init
// 2. Install the packages needed for webpack
// npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
// 3. Configure webpack
// webpack.config.js
// set jason ,"webpack": "webpack --config webpack.config.js"
// in buddle.js can add mode as development, as loading type is all in one line;
// 4. Compile and test
// npm run webpack
//5. then as ES6, set the <script type="module"> in index.html
</script>
</body>
</html>ES6 USE EXPORT, and webpack ues module.exports ={} https://webpack.js.org/concepts/
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}; 1. npm install in to set the dependency and package;
2. "webpack.config.js" change the export as "entry:'/src/index.js';"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>entry 和 output</title>
</head>
<body>
<script>
// 1.entry
// Specify the entry file
// Single entry
// Multiple entrances
// 2.output
</script>
</body>
</html>webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
// entry: './src/index.js',
// entry: {
// main: './src/index.js',
// search: './src/search.js'
// },
// output: {
// path: path.resolve(__dirname, 'dist'),
// filename: 'bundle.js'
// }
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
};package.json
{
"name": "webpack2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>loader</title>
</head>
<body>
<script src="./dist/index.js"></script>
<script>
// 1. What is a loader
// 1/2. webpack js/css/images
// The loader allows webpack to go through modules that are not JS files.
// babel
// 2. babel-loader
// npm install --save-dev babel-loader@8.1.0
// 3. Installing Babel
// npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0
// 4. Configure the babel-loader
// https://www.webpackjs.com/loaders/
// 5. Introduce core-js
// Compile the new API
// npm install --save-dev core-js@3.6.5
// import "core-js/stable".
// 6. Package and test
// npm run webpack
</script>
</body>
</html>webpack.config.js setting
const path = require('path');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>plugins</title>
</head>
<body>
<script>
// 1. What are plugins?
// Plugins
// loader is used to help webpack process various modules, while plugins can be used to perform a wider range of tasks
// https://www.webpackjs.com/plugins/
// 2. html-webpack-plugin
// npm install --save-dev html-webpack-plugin@4.3.0
// 3. Configuring the html-webpack-plugin plugin
// 4. Configuring the html-webpack-plugin plugin for multiple pages
// 5. Other features of the html-webpack-plugin plugin
</script>
</body>
</html>set the dependency in json
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
// entry: {
// index: './src/index.js'
// },
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [
// Single entry
// new HtmlWebpackPlugin({
// template: '. /index.html'
// })
// Multi-entry
new HtmlWebpackPlugin({
template: '. /index.html',
filename: 'index.html',
chunks: ['index'],
minify: {
// Remove comments from index.html
removeComments: true,
// Remove spaces from index.html
collapseWhitespace: true,
// Remove double quotes from various html tag values
removeAttributeQuotes: true
}
}),
new HtmlWebpackPlugin({
template: './search.html',
filename: 'search.html',
chunks: ['search']
})
]
};const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
// loader: 'css-loader'
// use: ['style-loader', 'css-loader']
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
};Copyright notice:
Copyright © 2023, Tanxiaoxu Unauthorized copying or usage of the contents of this article is prohibited.