的jQuery与2的WebPack

我webpack.config.js看起来如下：的jQuery与2的WebPack

var debug = process.env.NODE_ENV !== "production"; 
 
var webpack = require('webpack'); 
 
var path = require('path'); 
 
var node_dir = __dirname + '/node_modules'; 
 
const autoprefixer = require('autoprefixer'); 
 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 
 

 
module.exports = { 
 
    context: path.join(__dirname, "src"), 
 
    devtool: debug ? "inline-sourcemap" : null, 
 
    entry: ['tether', 
 
    'font-awesome-loader',"bootstrap-loader","./js/client.js"], 
 
    resolve: { 
 
    extensions: ['.js', '.styl'], 
 
    alias: { 
 
     'jquery': node_dir + '/jquery/src/jquery.js', 
 
    } 
 
    }, 
 
    module: { 
 
    rules: [ 
 
     { 
 
     test: /\.jsx?$/, 
 
     exclude: /(node_modules|bower_components)/, 
 
     loader: 'babel-loader', 
 
     query: { 
 
      presets: ['react', 'es2015', 'stage-0'], 
 
      plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'], 
 
     } 
 
     }, 
 
     { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, 
 
     { test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] }, 
 
     { 
 
     test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
     use: 'url-loader?limit=10000', 
 
     }, 
 
     { 
 
     test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, 
 
     use: 'file-loader', 
 
     }, 
 
     { 
 
     test: /\.styl$/, 
 
     use: [ 
 
     'style-loader', 
 
     'css-loader', 
 
     { 
 
      loader: 'stylus-loader', 
 
      /*options: { 
 
      use: [stylus_plugin()], 
 
      },*/ 
 
     }, 
 
     ], 
 
    }, 
 
     // Use one of these to serve jQuery for Bootstrap scripts: 
 

 
     // Bootstrap 4 
 
     { test: /bootstrap\/dist\//, use: 'imports-loader?jQuery=jquery' }, 
 
    ] 
 
    }, 
 
    output: { 
 
    path: __dirname + "/dist/", 
 
    filename: "client.min.js" 
 
    }, 
 
    plugins: [ 
 
    //new webpack.optimize.DedupePlugin(), 
 
    //new webpack.optimize.OccurenceOrderPlugin(), 
 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
 
    new webpack.ProvidePlugin({ 
 
     $: "jquery", 
 
     jQuery: "jquery", 
 
     "window.jQuery": "jquery", 
 
     Tether: "tether", 
 
     "window.Tether": "tether", 
 
     Alert: "exports-loader?Alert!bootstrap/js/dist/alert", 
 
     Button: "exports-loader?Button!bootstrap/js/dist/button", 
 
     Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel", 
 
     Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse", 
 
     Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", 
 
     Modal: "exports-loader?Modal!bootstrap/js/dist/modal", 
 
     Popover: "exports-loader?Popover!bootstrap/js/dist/popover", 
 
     Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy", 
 
     Tab: "exports-loader?Tab!bootstrap/js/dist/tab", 
 
     Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip", 
 
     Util: "exports-loader?Util!bootstrap/js/dist/util", 
 
    }), 
 
    new webpack.LoaderOptionsPlugin({ 
 
     postcss: [autoprefixer], 
 
    }) 
 
    ], 
 
};

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>React, Babel, Webpack 2</title> 
 
    </head> 
 
    <body class="container"> 
 
    <div id="app"></div> 
 
    <script src="jquery.timeago.js"></script> 
 
    <script src="client.min.js"></script> 
 
    
 
    </body> 
 
</html>

但是当我尝试使用jQuery.timeago（）函数，我得到下面的错误。

我下面做出反应按例书。当我键入window.jQuery时，我得到一些奇怪的数字出现在jQuery之后。但是，当我只是键入jQuery我变得不确定。作为引导4和$ .ajax（）正在工作，我相信包含jQuery，但不知道为什么jQuery显示不明确。

任何人都可以解释如何包括jQuery和我做错了什么。

来源

2017-05-20 Abhilash D K

中加入插件，插件您webpack配置的部分是这样的：

var webpack = require('webpack') 
... 

plugins: [ 
    new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    }) 
]

编辑：

你有循环依赖：

timeago: jquery 
client: timeago jquery

但jquery和client是同一束。尝试包括JS束开关在HTML这样的：

<script src="client.min.js"></script> 
<script src="jquery.timeago.js"></script>

代替：

<script src="jquery.timeago.js"></script> 
<script src="client.min.js"></script>

如果没有帮助，或者你有你需要提取jQuery来分开捆绑其他错误，包括它之前timeago。另一种方法是包括jquery像CDN老同学例如，使的WebPack知道是这样的：

externals: { 
    jquery: 'jQuery' 
}

要提取jQuery来分开捆绑，并使其成为TIMEAGO使用可见光包括顺序是这样的：

<script src="common.js"></script> 
<script src="jquery.timeago.js"></script> 
<script src="client.min.js"></script>

而且使用的WebPack常见块插件这样的：

entry: { 
    common: ["jquery"], 
    ... 
}, 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: "common", 
    filename: "common.js", 
    minChunks: Infinity, 
    }) 
],

来源

2017-05-21 06:26:51 oklas

HI。如果你看到我的webpack.config.js文件，我已经做到了。但是我仍然没有定义。 –

我扩展了答案。希望你会有成功。 – oklas

嗨。我改变了脚本标签的顺序。不工作。你能解释一下吗？“你需要将js提取到分离的包中并在时间之前包含它”。我是webpack的新手。 –

的jQuery与2的WebPack

回答

相关问题