zoukankan      html  css  js  c++  java
  • 利用webpack 打包多页应用

    利用webpack打包多页应用

    • 要点
      • 定义多个入口文件
      • 定义多个出口文件' [name].js'
      • 利用html-webpack-plugin
        • 如果有个多个文件,则需要多次new 这个插件,需要在插件中配置chunks
    const path = require('path')
    const HtmlWebpackPlugin = require("html-webpack-plugin")
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    const webpack = require('webpack')
    
    /**
     *  1. 多个入口, 多个出口, 多个html
     */
    
    module.exports = {
        mode: 'development',
        // 多入口
        entry: {
            home: __dirname + '/src/index.js',
            other: __dirname + '/src/other.js'
        },
        // 两个入口打包, 需要对应的多个出口, 产生多个html
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name][hash:4].js'
        },
        devServer: {
            contentBase: '/public',
            hot: true,
            port: 8000
        },
        module: {
            rules: [
                {
                    test: /.css$/i,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /.less$/i,
                    use: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
        // new 两次拆建
        plugins: [
            new HtmlWebpackPlugin({
                title: '龙风的测试店铺',
                template: __dirname + '/public/index.html',
                filename: 'home.html',
                chunks: ['home']
            }),
            new HtmlWebpackPlugin({
                title: '龙风的测试店铺',
                template: __dirname + '/public/index.html',
                filename: 'other.html',
                chunks: ['other']
            }),
            new CleanWebpackPlugin(),
            new webpack.HotModuleReplacementPlugin()
        ]
    }
    
  • 相关阅读:
    shell快捷键
    通过调整tcp参数来防范DDOS攻击
    解决 nf_conntrack: table full, dropping packet 的几种思路
    Linux系统资源限制
    解决Out of socket memory问题
    wrk简介
    部分 TCP 参数简介
    P1706 全排列问题
    P1149 [NOIP2008 提高组] 火柴棒等式
    P1104 生日
  • 原文地址:https://www.cnblogs.com/yaogengzhu/p/13556699.html
Copyright © 2011-2022 走看看