Home > Article > Web Front-end > Briefly understand the webpack packaging process
Briefly understand the webpack packaging process
- WBOYforward
- 2022-08-09 09:52:061479browse
This article brings you relevant knowledge about javascript, which mainly introduces issues related to the webpack packaging process. Webpack is a static module packaging tool for modern JavaScript applications. The following Let's take a look, I hope it will be helpful to everyone.
[Related recommendations: javascript video tutorial, web front-end】
webpack: Is a static module packaging tool for modern JavaScript applications. When webpack processes an application, it internally builds a dependency graph from one or more entry points and then combines every module required in your project into one or more bundles, they are all static resources, used to display your content.
WebPack can be regarded as a module packager: what it does is to analyze your project structure, find JavaScript modules and other extension languages that browsers cannot run directly (Sass, TypeScript, etc.), and Convert and package it into a suitable format for use by the browser. After the emergence of 3.0, Webpack also took on the responsibility of optimizing the project.
There are three key points in this paragraph:
Packaging: Multiple Javascript files can be packaged into one file to reduce server pressure and download bandwidth.
Conversion: Convert the extended language into ordinary JavaScript to allow the browser to run smoothly.
Optimization: As the front end becomes more and more complex, performance will also encounter problems, and WebPack has also begun to shoulder the responsibility of optimizing and improving performance
1. Create a new project, and then execute
npm init
2. Install webpack and webpack-cil globally
npm install -g webpack npm install -g webpack-cil
3. Install webpack into project dependencies so that you can use the local version of webpack
npm install webpack -save-dev npm install webpack-cil -save-dev
4. Create the outermost webpack.config.js and change the default settings
Function: For convenience, you don’t have to enter the directory address every time you package, but just webpack it directly
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js', // 指定打包入口文件
output: {
filename: 'index.js', // 指定打包输出文件名
path: path.resolve(__dirname, './public'), // 指定打包输出路径
},
module: { // 对模块的处理逻辑
rules: [ // 一系列的加载器的处理逻辑
{
test: /\.css$/, // 正则 匹配到文件后缀
use: [
'style-loader',
'css-loader',
], // 用此加载器处理匹配到的文件
exclude: [ // 排除此文件夹下的文件
path.resolve(__dirname, './node_modules')
]
}
],
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
removeAttributeQuotes: true,
},
hash: true,
}),
new webpack.EnvironmentPlugin(
{
NODE_ENV: 'development',
TEST: 'true',
}
),
new CopyPlugin({
patterns: [
{from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')},
],
}),
],
// 配置webpack服务
devServer: {
port: 8000, // 启动服务监听端口
host: 'localhost', // 可以通过localhost访问
open: true, // 自动打开浏览器
hot: true, // 启动热更新
},
};
5. Install HtmlWebpackPlugin
This plug-in will generate an HTML5 file for you, and use the script tag in the body to introduce all your webpack-generated bundles. Just add the plug-in to your webpack configuration
npm install --save-dev html-webpack-plugin
6. Install CopyWebpackPlugin
This plug-in packages and copies the required files to the place you need. The reason why I installed this plug-in is because after I packaged the package, the css was not packaged successfully. After that, I tried many methods without success. I could only manually execute this and copy the css package to the past.
npm install copy-webpack-plugin --save-dev // 安装
// Use from and to are to copy the files in the form place to the to place
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "source", to: "dest" },
{ from: "other", to: "public" },
],
}),
],
}; // webpack.config.js
7. Two packaging methods
webpack --mode development // 开发模式 不压缩 webpack --mode production // 生产模式 压缩
8. Install webpack-dev-server
npm install --save-dev webpack webpack-dev-server
const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
9. After packaging, start the project:
"scripts": {
"test": "mocha",
"start": "webpack-dev-server",
"dev": "webpack --mode development"
},// 在package.json 里面进行配置
// 然后执行
npm run start // 项目启动&热更新
npm run dev // 再次打包
npm run test // 执行测试
[Related recommendations: javascript video tutorial, web front end】
The above is the detailed content of Briefly understand the webpack packaging process. For more information, please follow other related articles on the PHP Chinese website!