webpack静态资源打包
时间: 2023-11-28 20:45:44 浏览: 51
Webpack是一个非常流行的前端工具,主要作用是处理模块依赖关系,将模块打包成静态资源文件,并提供一些高级功能,如代码分割、热模块替换、代码压缩等。下面是使用Webpack进行静态资源打包的步骤:
1.安装Webpack和Webpack CLI
```shell
npm install webpack webpack-cli --save-dev
```
2.创建Webpack配置文件webpack.config.js
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, 'dist') // 打包后的目录
}
};
```
3.在package.json中添加打包命令
```json
{
"scripts": {
"build": "webpack --mode=production"
}
}
```
4.运行打包命令
```shell
npm run build
```
以上就是使用Webpack进行静态资源打包的基本步骤。
相关问题
webpack静态打包
Webpack 是一个现代的静态资源打包工具。它可以将多个 JavaScript 文件、CSS 文件、图片等静态资源打包成一个或多个文件,使得网页加载速度更快、交互更流畅。下面是使用 Webpack 进行静态打包的步骤:
1. 安装 Webpack:在命令行中使用 npm 安装 webpack 和 webpack-cli。
```
npm install webpack webpack-cli --save-dev
```
2. 新建一个 webpack.config.js 文件,配置入口和出口。
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 打包后的文件名
path: path.resolve(__dirname, 'dist') // 打包后的目录
}
};
```
3. 在终端中运行 webpack 命令进行打包。
```
npx webpack
```
4. 在 index.html 中引入打包后的文件。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack Demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
```
这样就完成了 Webpack 的静态打包。
webpack配置静态资源入口
在webpack中配置静态资源入口可以通过file-loader或url-loader来实现。具体步骤如下:
1. 安装file-loader或url-loader:
```
npm install file-loader --save-dev
npm install url-loader --save-dev
```
2. 在webpack配置文件中添加模块配置:
```
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 大于8kb的文件会被转成单独的文件,否则转成base64编码的字符串
name: 'images/[name].[hash:8].[ext]' // 静态资源输出路径及文件名格式
}
}
]
}
]
}
```
3. 在代码中引入静态资源:
```
import myImage from './images/my-image.png';
```
这样就可以在代码中引用静态资源了,webpack会自动将其打包到输出目录中。