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

问题描述

/* 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存放路径，相对于pathtemplate: 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;}

问题解答

loader: ’expose-loader?jQuery!expose-loader?$’

如果jquery是安装到node_modules的，上面这个只有在webpack编译包含jquery对象的入口文件之后才能将jquery暴露给全局，让你能在index用<script>引用jquery插件啥的- -