普通html用webpack打包
时间: 2024-03-26 12:40:53 浏览: 24
可以通过以下步骤将普通的 HTML 文件使用 Webpack 进行打包:
1. 安装 webpack 和 webpack-cli:
```
npm install webpack webpack-cli --save-dev
```
2. 在项目根目录下创建一个 `webpack.config.js` 文件,配置入口和输出文件路径:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.html',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.bundle.js'
}
};
```
3. 安装 `html-webpack-plugin`,用于将 HTML 文件输出到指定路径:
```
npm install html-webpack-plugin --save-dev
```
4. 在 `webpack.config.js` 文件中添加插件配置:
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
};
```
5. 在 `package.json` 中添加打包命令:
```json
"scripts": {
"build": "webpack --mode production"
}
```
6. 运行打包命令:
```
npm run build
```
打包完成后,输出文件将会在 `dist` 目录下。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)