资讯专栏INFORMATION COLUMN

webpack多入口文件配置模板

zoomdong / 1709人阅读

摘要:概述本篇文章是目前多入口项目中使用的配置文件,配置文件匹配目录规范使用。

概述

本篇文章是目前多入口项目中使用的配置文件,配置文件匹配目录规范使用。

初始设置

package.json

  "scripts": {
    "hot": "set NODE_ENV=hotdev&&webpack-dev-server --inline --hot --colors --host 127.0.1.1 --port 80",
    "dev": "set NODE_ENV=development&&webpack --progress --colors",
    "product": "set NODE_ENV=production&&webpack --progress --colors"
  },

webpack.config.js

// 判断生产&&测试环境
var isProduction = function() {
    return process.env.NODE_ENV ==="production";
};

// 判断开发(热加载)环境
var isHot = function() {
    return process.env.NODE_ENV === "hotdev";
};

// 不同环境输出到不同文件夹
var sEnvironment = function() {
    switch(process.env.NODE_ENV){
        case "hotdev":
            return "/hot/";
        case "production":
            return "/dist/";
        default:
            return "/dev/";
    }
};

// 运行终端: "mobile/"表示微信端;"basic/"表示PC端
// 项目原因有两套配置文件
var sSystem = "basic/";
需要安装的插件
var webpack           = require("webpack");
var path              = require("path");
var glob              = require("glob");
var precss            = require("precss");
var autoprefixer      = require("autoprefixer");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
获取多入口文件方法
function getEntry() {
    var entry = {};
    var nLength = sSystem.length - 1;
    var srcDirName = "./src/ovdream/"+sSystem+"*/*/*.js"; //需要获取的文件路径
    
    glob.sync(srcDirName).forEach(function (name) {
        //name:./src/ovdream/basic/member/index/index.js
        
        //裁剪路径
        var n = name.slice(name.lastIndexOf(sSystem) + nLength, name.length - 3);
        //n:/member/index/index
        n = n.slice(0, n.lastIndexOf("/"));
        //n:/member/index
        
        entry[n] = name;
        
        if(sSystem==="mobile/"){
            //此处可引入第三方库文件等需要打包成公共模块的文件
            entry["vendor/vendor"]=["./src/ovdream/global/global.css"];
        }else{
            entry["vendor/vendor"]=["./src/ovdream/global/global.js","./src/libs/layer/need/layer.css",;
        }
    });
    console.log("是否压缩文件:"+isProduction());
    console.log("输出路径:"+sEnvironment()+"ovdream/"+sSystem);
    return entry;
}
配置

别名

var alias={};
if(sSystem==="mobile/"){
    alias={
        "layer": "layer_mobile/layer",
        "layercss": "layer_mobile/need/layer",
    };
}else{
    alias={
        "layer": "layer/layer",
        "layercss": "layer/need/layer",
    };
}

插件

var plugins = [
    //提供全局的变量,在模块中使用无需用require引入
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery",
        "window.jQuery": "jquery"
    }),
    //提取公共模块
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor/vendor",
        filename: "[name].min.js",
        //开发模式时不提取公共模块
        minChunks: isProduction() ? 10 : false
    }),
    //多带带打包css
    new ExtractTextPlugin("[name].min.css"),
];
if (isProduction()) {
    plugins.push(
        //文件压缩/混淆
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            mangle: {
                except: ["$", "webpackJsonpCallback"]
            }
        })
    );
}
module.exports = {
    entry: getEntry(),//入口文件
    output: {
        path: path.join(__dirname,sEnvironment()+"ovdream/"+sSystem),
        /**
        用于配置文件发布路径;
        开发&测试&生产环境为"../",加载路径动态获取
        热加载环境时配置域名及输出文件夹
        在入口文件中配置__webpack_public_path__(一般配置在vendor文件中)
        **/
        publicPath:isHot()?("http://common.statics.ovdream.com"+sEnvironment()+"ovdream/"+sSystem):"../",
        filename:"[name].min.js",
        //异步加载文件命名,hash值避免重命名
        chunkFilename: "[name].[chunkhash:8].js"
    },
    resolve: {
        extensions: ["", ".js", ".json", ".css"],//自动扩展文件后缀
        root: [//设置alias文件引用根目录
            path.resolve("./src/libs")
        ],
        alias:alias
    },
    module: {
        loaders:[
            { test: /.css$/,  loader:ExtractTextPlugin.extract("style-loader","css-loader?sourceMap!postcss-loader")},
            { test: /.(png|jpg|gif|svg)$/, loader: "url-loader?limit=8192&name=image/[name].[ext]"},
            {
               test: /.(eot|ttf|woff)$/i,
               loader: "url?limit=10000&name=fonts/[name].[ext]"
            }
        ]
    },
    postcss: function() {
        if(sSystem==="mobile/"){
            return [
                precss,
                autoprefixer({ browsers: [">5%", "ios 7", "ios 8"] })
            ];
        }else{
            return [
                precss,
                autoprefixer({ browsers: ">5%"})
            ];
        }
    },
    //外部变量jQuery,在页面script引入
    externals:{
        jquery:"jQuery"
    },
    plugins: plugins,
    //生产模式时关闭sourece-map模式
    devtool: isProduction()?null:"source-map",
};

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80987.html

相关文章

  • 基于 Webpack 4 入口生成模板用于服务端渲染的方案及实战

    摘要:原作者原链接基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。 原作者:@LinuxerPHL原链接:基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战 法律声明 警告:本作品遵循 署名-非商业性使用-禁止演绎3.0 未本地化版本(CC BY-...

    big_cat 评论0 收藏0
  • 基于 Webpack 4 入口生成模板用于服务端渲染的方案及实战

    摘要:原作者原博文地址基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。 原作者:@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战 法律声明 警告:本作品遵循 署名-非商业性使用-禁止演绎3.0 未本地化版本(...

    Lavender 评论0 收藏0
  • vue+webpack页面应用

    摘要:多页面应用就是几个单页面应用在一起。这篇文章使用的是总共有步我们从安装好一个单页面应用说起。在多页面应用中,因为有多个应用模板,所以建议把应用模板放在一个文件夹里。例如创建每个单页面应用的入口文件。如能用单页面应用的,不使用多页面应用。 vue+webpack多页面应用 从git上初始化的vue项目框架是单页面的。单页面应用可以实现大部分页面web应用开发。若要用到多页面需要需要配置。...

    PascalXie 评论0 收藏0
  • webpack搭建页面系统(三) 理解webpack.config.js的四个核心概念

    摘要:关于模板的有好几种。一次安装所有的大家可以了解一些的用法把编译成。安装参考文档功能将源文件迁移到指定的目录,返回新的文件路径。安装用法它会将所有的入口中引用的移动到和页面对应的独立分离的文件。 webpack是需要自己编写自己需要的一个配置对象,取决你如何使用webpack,下面指定了所有的可用的配置选项。参考文档:https://doc.webpack-china.org... we...

    邹强 评论0 收藏0
  • 前端临床手札——webpack构建逐步解构(上)

    摘要:前言由于博主最近又闲下来了,之前觉得的官方文档比较难啃一直放到现在。文章会逐步分析每个处理的用意当然是博主自己的理解,不足之处欢迎指出沟通交流。后续将会补上构建生产的配置分析,案例参考。前端临床手札构建逐步解构下 前言 由于博主最近又闲下来了,之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得还是得自己写个手脚架,当然这个案例是基于vue的,...

    lowett 评论0 收藏0

发表评论

0条评论

zoomdong

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<