zoukankan      html  css  js  c++  java
  • 入口一次配置

    在入口多次配置基础上升级

    初始化:npm init -y   

    安装依赖:npm install --save-dev css-loader file-loader html-loader html-webpack-plugin less less-loader style-loader url-loader jquery extract-text-webpack-plugin webpack webpack-dev-server glob

    "devDependencies": {
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "glob": "^7.1.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.1",
    "uglifyjs-webpack-plugin": "^1.1.4",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
    }


    项目结构:
    -root
      +dist        自动生成
      +node_modules   自动生成
      -src
        +css
        +img
        +js
        +views
      package.json
      package-lock.json
      webpack.config.js

    具体结构参考 http://www.cnblogs.com/redn/p/8065913.html

    webpack.config.js 文件

    //引入需要的模块
    var path = require('path');
    var glob=require('glob');
    var webpack = require('webpack');
    var ExtractTextPlugin=require("extract-text-webpack-plugin");
    var HtmlWebpackPlugin=require("html-webpack-plugin");
    var uglifyjsPlugin=require("uglifyjs-webpack-plugin");
    var CommonsChunkPlugin=webpack.optimize.CommonsChunkPlugin;

    var entries=getEntry('src/js/page/**/*.js','src/js/page');
    var chunks=Object.keys(entries);

    var config={
    entry:{
    index:"./src/js/page/index.js",
    about:"./src/js/page/about.js",
    list:"./src/js/page/list.js"
    },
    output:{
    path:path.join(__dirname,'dist'),
    publicPath: '/dist/',
    filename:'js/[name].js',
    chunkFilename:'js/[id].chunk.js'
    },
    module:{
    loaders:[
    {
    test:/.css$/,
    loader:ExtractTextPlugin.extract({
    fallback:"style-loader",
    use:[
    {
    loader:"css-loader",
    options:{
    minimize:true
    }
    }
    ]
    })
    },{
    test:/.less$/,
    loader:ExtractTextPlugin.extract('css-loader!less-loader')
    },{
    test:/.html$/,
    loader:"html-loader?attrs=img:src img:data-src"
    },{
    test: /.(woff|woff2|ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
    loader: 'file-loader?name=./fonts/[name].[ext]'
    }, {
    test:/.(png|jpg|gif)$/,
    loader:'url-loader?limit=8192&name=./img/[hash].[ext]'
    }
    ]
    },
    plugins:[
    new webpack.ProvidePlugin({
    $:'jquery'
    }),
    new CommonsChunkPlugin({
    name:'vendors',
    chunks:chunks,
    minChunks:chunks.length
    }),
    new ExtractTextPlugin('css/[name].css'),
    new HtmlWebpackPlugin({
    // favicon:'./src/img/favicon.ico',
    filename:'./views/index.html',
    template:'./src/views/index.html',
    inject:'body',
    hash:true,
    chunks:['vendors','index'],
    minify:{
    removeComments:true,
    collapseWhitespace:false
    }
    }),
    new HtmlWebpackPlugin({
    // favicon:'./src/img/favicon.ico',
    filename:'./views/about.html',
    template:'./src/views/about.html',
    inject:'body',
    hash:true,
    chunks:['vendors','about'],
    minify:{
    removeComments:true,
    collapseWhitespace:false
    }
    }),
    new HtmlWebpackPlugin({
    // favicon:'./src/img/favicon.ico',
    filename:'./views/list.html',
    template:'./src/views/list.html',
    inject:'body',
    hash:true,
    chunks:['vendors','list'],
    minify:{
    removeComments:true,
    collapseWhitespace:false
    }
    }),
    new uglifyjsPlugin(),
    new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
    contentBase:'./',
    host:'localhost',
    port:9090,
    inline:true,
    hot:true
    }
    };

    var pages=Object.keys(getEntry('src/views/**/*.html','src/views/'));
    pages.forEach(function (pathname) {
    var conf={
    filename:'./views/'+pathname+'.html',
    template:'./src/views/'+pathname+'.html',
    inject:false
    };
    if(pathname in config.entry){
    conf.favicon=path.resolve(__dirname,'src/img/favicon.ico');
    conf.inject='body';
    conf.chunks=['vendors',pathname];
    conf.hash=true
    }
    config.plugins.push(new HtmlWebpackPlugin(conf))
    });

    module.exports=config;

    function getEntry(globPath, pathDir) {
    var files=glob.sync(globPath);
    var entries={},entry,dirname,basename,pathname,extname;

    for(var i=0;i<files.length;i++){
    entry=files[i];
    dirname=path.dirname(entry);
    extname=path.extname(entry);
    basename=path.basename(entry,extname);
    pathname=path.normalize(path.join(dirname,basename));
    pathDir=path.normalize(pathDir);
    if(pathname.startsWith(pathDir)){
    pathname=pathname.substring(pathDir.length)
    }
    entries[pathname]=['./'+entry]
    }
    return entries;
    }

    package.json配置如前
    http://www.cnblogs.com/redn/p/8065913.html

    项目代码参考:https://github.com/Rednuo/webpackMuiltPage2.git


















  • 相关阅读:
    hdu 2795 Billboard
    serialusbfn.dll这个罪魁祸首搞得我郁闷之极(作者:wogoyixikexie@gliet)
    开发板买来后如何练习写驱动、开发BSP?(作者:wogoyixikexie@gliet)
    PB命令行——查看DLL导出函数
    【劲爆】发帖达到要求即可获得一块mini6410/OK6410开发板!
    GOD!我终于找到博客园设置博客文章图片签名的方法了!
    如何删除wince5.0控制面板的密码设置以及拨号等组件
    【原创】最值得推荐wince应用和wince驱动入门书籍
    gooogleman嵌入式联盟之图标初步设计进展
    2440 5.0BSP之OEMInterruptHandler函数
  • 原文地址:https://www.cnblogs.com/redn/p/8073833.html
Copyright © 2011-2022 走看看