zoukankan      html  css  js  c++  java
  • webpack打包多个入口文件

    打包后的目录结构:

    webpack.config.js

    // path 模块提供了一些用于处理文件路径
    const path = require('path');
    // fs模块用于对系统文件及目录进行读写操作
    const fs = require('fs');
    // 访问内置的插件
    const webpack = require('webpack');
    // cnpm install html-webpack-plugin --save-dev
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    // cnpm install clean-webpack-plugin --save-dev
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    
    /**
     * webpack配置
     * @type {Object}
     */
    const option = {};
    
    /**
     * 入口
     * @type {Object}
     */
    option.entry = {};
    /**
     * 出口
     * @type {Object}
     */
    option.output = {};
    // 打包根路径
    option.output.path = path.resolve("./dist");
    // 打包后js文件的相对路径
    // option.output.filename = "js/[name]/index_[chunkhash:8].js";
    option.output.filename = "js/[name].[chunkhash].js";
    /**
     * 打包类型
     * @type {String}
     */
    option.devtool = "eval-source-map";
    /**
     * 本地服务器配置
     * @type {Object}
     */
    option.devServer = {};
    // 本地服务器根路径
    option.devServer.contentBase = "./public";
    // 是否记录历史
    option.devServer.historyApiFallback = false;
    // 是否实时刷新
    option.devServer.inline = true;
    // 监听端口
    option.devServer.port = 8080;
    /**
     * 插件
     * @type {Array}
     */
    option.plugins = [];
    // BannerPlugin插件
    option.plugins.push(new webpack.BannerPlugin('版权所有,翻版必究'));
    // 清除文件的CleanWebpackPlugin插件
    option.plugins.push(new CleanWebpackPlugin(['dist/*.*','dist/js/*.js'],{
        root:__dirname,
        verbose:true,
        dry:false
    }));
    
    /**
     * 测试多入口
     * key值:打包后的文件name
     * value值:源代码中的文件name
     */
    option.entry.index = './src/main.js'; // => js/[name].[chunkhash].js => js/index.ff1e318532ae5fd984de.js
    option.entry.a = './src/aa.js'; // => js/[name].[chunkhash].js => js/a.010a88238103e5fa9139.js
    option.entry.b = './src/bb.js'; // => js/[name].[chunkhash].js => js/b.9f92cb4ee4ecd280c3af.js
    
    /**
     * 测试多个html文件
     * template : 源代码中的html文件
     * filename : 打包后的html文件
     * chunks : 要引入打包后的哪些js文件,从entry的key值里面找寻
     */
    option.plugins.push(new HtmlWebpackPlugin({
        template:'./src/aa/index.html',
        filename:'aa_index.html',
        chunks:['a']
    }));
    option.plugins.push(new HtmlWebpackPlugin({
        template:'./src/bb/index.html',
        filename:'bb_index.html',
        chunks:['b']
    }));
    option.plugins.push(new HtmlWebpackPlugin({
        template:'./src/index.html',
        filename:'index.html',
        chunks:['index','a','b']
    }));
    
    //导出
    module.exports = option;
  • 相关阅读:
    MapXtreme 2005
    QQ在线源码
    Oralce rowid
    MOSS2007 安装与部署(下)
    MapXtreme 2005新增内容
    MOSS 2007安装与部署(上)
    PL/SQL中的where子句比较
    Oracle中插入日期型数据
    在HTML语言网页中加载视频的代码
    HTTP 错误 500.24 Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置。
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/9958257.html
Copyright © 2011-2022 走看看