Webpack学习笔记（三）plugins让打包更便捷

最新推荐文章于 2024-06-06 15:02:43 发布

weixin_43756060

最新推荐文章于 2024-06-06 15:02:43 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

分类专栏： Webpack

本文链接：https://blog.youkuaiyun.com/weixin_43756060/article/details/91373197

Webpack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HtmlWebpackPlugin自动生成包含打包JS的HTML文件，及clean-webpack-plugin在打包前清理输出目录。通过配置webpack.config.js，实现自动化部署流程。

一.HtmlWebpackPlugin

会在打包结束后，在dist目录下自动生成html文件，并把打包生成的js自动引入到html文件中
webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
  	template:'src/index.html'
  })]
};

template:'src/index.html’设置html模板文件

二.clean-webpack-plugin

webpack.config.js

var CleanWebpackPlugin = require('clean-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
  	template:'src/index.html'
  }),new CleanWebpackPlugin(['dist'])]
};

参数代表在打包之前会删除dist目录下的所有东西