javascript - webpack 加载静态jquery文件可以实现全局变量吗？

Question

/* 2017-04-13 webpack_Demo */
var webpack = require('webpack');
var path = require('path');
var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var Merge = require('webpack-merge');

var public_PATHS = {
    node_modules_Path: path.resolve('./node_modules'),
    public_resource_Path: path.resolve(process.cwd(), './src/public_resource'),
    vendor_Path: path.resolve(process.cwd(), './src/vendor')
};

var file_js = getEntry('./src/pages/**/*.js','./src/pages/');
//var file_styles = getEntry('./src/pages/**/*.?(css|less)','./src/pages/');
var file_html =  getEntry('./src/pages/**/*.html','./src/pages/');

var pages = Object.keys(file_html);    //get file_html keyval    

//console.log(pages);

var entry_config = Object.assign(file_js);

var output_config = {
    path: __dirname+'/build/pages',
    filename: '[name].js'
};

var module_config ={
    loaders: [
        //expose-loader
        {
              test: require(public_PATHS.vendor_Path+'/js/jquery-1.10.2.min.js'),
              loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
        },
        //css 文件使用 style-loader 和 css-loader 来处理
        {
            test: /\.css$/, loader: 'style-loader!css-loader'
        },
    ]
}

var plugins_config = [
    //warming: this is a Array multips pages web_application need to push htmlwebpackplugin_config_Array
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery',
      })
];

pages.forEach(function(pathname) {
    console.log("pathname"+pathname);
    var conf = {
        filename: __dirname+'/build/pages/' + pathname + '.html', //生成的html存放路径，相对于path
        template: path.resolve(__dirname, './src/pages/' + pathname + '.html'), //html模板路径
        //path.resolve(process.cwd(), './src/page'),
        inject: 'head',
        
    };
    plugins_config.push(new HtmlWebpackPlugin(conf));
});
var resolve_config = {
    extensions: ['.js', '.css', '.less', '.ejs', '.png', '.jpg','.gif','.html'],    //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
    
    alias: {
        jquery: path.join(public_PATHS.vendor_Path, "js/jquery-1.10.2.min.js"),
        avalon2: path.join(public_PATHS.vendor_Path, "js/avalon.js"),
        mmRouter: path.join(public_PATHS.vendor_Path, "js/mmRouter.js"),
        lodash: path.join(public_PATHS.vendor_Path, "js/lodash.min.js")
       }    //模块别名定义，方便后续直接引用别名，无须多写长长的地址
   
   //root:public_PATHS
};

console.log("ss"+public_PATHS.vendor_Path);

var webpack_config = {
    entry:entry_config,
    output: output_config,
    module:module_config,
    plugins:plugins_config,
    resolve:resolve_config 
};


module.exports = webpack_config;

//common function//

/**
 * 获得路径
 * @param globPath: str
 * @param pathDir: str 对比路径
 * @returns obj 
*/
function getEntry(globPath, pathDir) {
    //get from github code 
    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);    //返回路径中代表文件夹的部分
        //console.log("dirname返回路径中代表文件夹的部分:==>"+dirname);
        extname = path.extname(entry);    //返回路径中文件的后缀名，即路径中最后一个'.'之后的部分。如果一个路径中并不包含'.'或该路径只包含一个'.' 且这个'.'为路径的第一个字符，则此命令返回空字符串。
        //console.log("extname返回路径中文件的后缀名:==>"+extname);
        basename = path.basename(entry, extname);    //返回路径中的最后一部分
        //console.log("basename返回路径中的最后一部分:==>"+basename);
        pathname = path.normalize(path.join(dirname,  basename));    //规范化路径
        //console.log("pathname规范化路径:==>"+pathname);
        pathDir = path.normalize(pathDir);    //规范化路径
        //console.log("pathDir规范化路径:==>"+pathDir);
        if(pathname.startsWith(pathDir)){
            pathname = pathname.substring(pathDir.length);
            //console.log("pathname判断后:==>"+pathname);   
        };
        entries[pathname] = './' + entry;
    }
    console.log(entries);
    return entries;
}

Answer 1

リーリー

jquery がnode_modules にインストールされている場合、上記は webpack が jquery オブジェクトを含むエントリ ファイルをコンパイルした後でのみ jquery を公開できるため、<script> で jquery プラグインを参照できるようになります。インデックス - -