Webpack 使用详解
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。本文将详细介绍如何使用 Webpack，以及提供代码示例。为了保持篇幅，我们将简要介绍 Webpack 的核心概念和功能。
一、核心概念
入口（entry）：应用程序的起点。
输出（output）：打包后资源的输出位置。
加载器（loader）：将非 JavaScript 文件转换为模块。
插件（plugin）：执行范围更广的任务，如优化、压缩等。
二、安装与配置
1. 安装
首先，确保你的系统已经安装了 Node.js。使用以下命令安装 Webpack 和 Webpack CLI：
npm install --save-dev webpack webpack-cli
2. 配置
在项目根目录下，创建一个名为 webpack.config.js 的配置文件。以下是一个简单的配置示例：
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') // 输出目录
}
};
三、加载器与插件
1. 加载器
加载器用于将非 JavaScript 文件转换为模块。以下是一些常用加载器的示例：
(1) 样式加载器
安装 style-loader 和 css-loader：
npm install --save-dev style-loader css-loader
配置：
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
(2) 文件加载器
安装 file-loader：
npm install --save-dev file-loader
配置：
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: ['file-loader']
}
]
}
};
2. 插件
插件可以执行更广泛的任务，如优化、压缩等。以下是一些常用插件的示例：
(1) HtmlWebpackPlugin
安装 html-webpack-plugin：
npm install --save-dev html-webpack-plugin
配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: './src/index.html'
})
]
};
(2) CleanWebpackPlugin
安装 clean-webpack-plugin：
npm install --save-dev clean-webpack-plugin
配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// ...
plugins: [
new CleanWebpackPlugin()
]
};
四、开发与生产环境
1. 模式
Webpack 支持两种模式：开发（development）和生产（production）。开发模式不会执行代码压缩和优化，而生产模式会对代码进行压缩和优化。在 webpack.config.js 文件中设置模式：
module.exports = {
// ...
mode: 'development' // 或 'production'
};
2. 开发服务器
安装 webpack-dev-server：
npm install --save-dev webpack-dev-server
配置：
module.exports = {
// ...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
五、示例项目
以下是一个简单的 Webpack 示例项目：
- 创建目录结构：
my-app/
|-- src/
| |-- index.html
| |-- index.js
| |-- styles.css
| |-- image.png
|-- package.json
|-- webpack.config.js
- 填充 src 目录中的文件：
index.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Apptitle>
head>
<body>
<div id="app">div>
<script src="bundle.js">script>
body>
html>
index.js
import './styles.css';
import imgSrc from './image.png';
const app = document.getElementById('app');
app.innerHTML = `
Hello, Webpack!
${imgSrc}" alt="Webpack Logo" />
`;
styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #2c3e50;
}
img {
width: 150px;
height: 150px;
}
- 在 webpack.config.js 中配置加载器和插件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: ['file-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new CleanWebpackPlugin(),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
},
};
- 在 package.json 中添加启动脚本：
{
// ...
"scripts": {
"start": "webpack serve",
"build": "webpack"
},
// ...
}
- 运行项目：
npm start
访问 http://localhost:9000 即可查看示例项目。使用 npm run build 可以打包项目。
总结
通过本文，你应该已经掌握了 Webpack 的基本使用方法。实际项目中，你可能还需要根据需求进一步配置 Webpack。更多信息和高级配置，请查阅 Webpack 官方文档。