webpack多页面应用配置

最新推荐文章于 2024-06-04 16:28:43 发布

原创最新推荐文章于 2024-06-04 16:28:43 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文介绍如何使用Yarn初始化项目，并通过Webpack配置多页面应用，包括设置多入口文件、输出配置及使用html-webpack-plugin自动生成HTML文件并引入JS。

yarn init -y
yarn add webpack webpack-cli -D

然后在根目录写webpack.config.js

let path = require('path')
module.exports = {
    //  多入口，
    mode:'development',
    entry: {
        home: './src/index.js',
        other: './src/other.js',
    },
    output: {
        filename: '[name].js',//代表home/other
        path: path.resolve(__dirname,'dist')
    }
}

安装 html-webpack-plugin 用模版生成html 并自动把js引入进去

html-webpack-plugin

配置如下：

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    //  多入口，
    mode:'development',
    entry: {
        home: './src/index.js',
        other: './src/other.js',
    },
    output: {
        filename: '[name].js',//代表home/other
        path: path.resolve(__dirname,'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'home.html',
            chunks:['home']
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'other.html',
            chunks:['other','home']
        }),
    ]
}