Webpack：使用Plugins打包（5）

最新推荐文章于 2023-07-31 19:18:01 发布

黑卡米

最新推荐文章于 2023-07-31 19:18:01 发布

阅读量131

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/Aaren_Jiang/article/details/108864540

版权

Webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

安装插件

//该插件将为你生成一个 HTML5 文件， 并引用打包出来的js文件，方便查看打包效果
npm install --save-dev html-webpack-plugin

//所有在webpack's output.path 文件将被删除一次
npm install clean-webpack-plugin -D

webpack.config.js

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    plugins: [
        new HtmlWebpackPlugin({
            //模版文件会自动被打包出来，并引入打包的js文件
            template: 'src/index.html'
        }),
        //打包前删除掉以前output出来的文件
        new CleanWebpackPlugin()
    ],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

打包模版

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
    <div id="root"></div>
</body>
</html>

js文件

//index.js文件
var Header = require('./header.js');
new Header();

//header.js文件

function Header() {
    var dom = document.getElementById('root');
    var header = document.createElement('div');
    header.innerText = 'header';
    dom.append(header);
}
module.exports = Header;

黑卡米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack：使用Plugins打包（5）

安装插件//该插件将为你生成一个 HTML5 文件，并引用打包出来的js文件，方便查看打包效果npm install --save-dev html-webpack-plugin//所有在webpack's output.path 文件将被删除一次npm install clean-webpack-plugin -Dwebpack.config.jsconst path = require('path');var HtmlWebpackPlugin = require('html-web
复制链接

扫一扫

专栏目录