js实现webpack
Webpack 的基本概念
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它能够将多个模块及其依赖关系打包成一个或多个静态资源文件，适用于现代前端开发。
使用 Webpack 的基本步骤
安装 Webpack
确保已安装 Node.js，然后通过 npm 或 yarn 安装 Webpack 及其 CLI 工具：
npm install webpack webpack-cli --save-dev创建项目结构
典型的项目结构如下：
my-webpack-project/
├── src/
│ ├── index.js
│ └── utils.js
├── dist/
├── webpack.config.js
└── package.json配置 Webpack
创建 webpack.config.js 文件，定义入口、输出和加载器（Loaders）：
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出目录
},
module: {
rules: [
{
test: /\.js$/, // 匹配所有 .js 文件
exclude: /node_modules/, // 排除 node_modules
use: {
loader: 'babel-loader', // 使用 Babel 转译 ES6+
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};使用 Babel 转译 JavaScript
安装 Babel 及其相关依赖：
npm install @babel/core @babel/preset-env babel-loader --save-dev运行 Webpack
在 package.json 中添加构建脚本：
{
"scripts": {
"build": "webpack"
}
}运行构建命令：
npm run build扩展功能
处理 CSS 和样式
安装 style-loader 和 css-loader：
npm install style-loader css-loader --save-dev在 webpack.config.js 中添加规则：
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}使用插件（Plugins）
安装 html-webpack-plugin 自动生成 HTML 文件：
npm install html-webpack-plugin --save-dev在配置文件中引入插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 模板文件
}),
],
};开发服务器
使用 webpack-dev-server
安装开发服务器：
npm install webpack-dev-server --save-dev在 package.json 中添加启动脚本：
{
"scripts": {
"start": "webpack serve --open"
}
}运行开发服务器：
npm start优化打包
代码分割（Code Splitting）
通过动态导入或配置 optimization.splitChunks 实现代码分割：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};生产模式优化
设置 mode 为 production，Webpack 会自动启用优化（如压缩代码）：
module.exports = {
mode: 'production',
};通过以上步骤，可以快速搭建一个基本的 Webpack 项目，并根据需求扩展功能。
