麻煩添加jQuery的webpack

我是新來的webpack。我通過https://github.com/vuejs/vue-cli安裝了我不太明白如何添加jquery依賴項。我已經嘗試了幾乎每一個我可以找到的教程，似乎沒有任何工作。麻煩添加jQuery的webpack

我使用引導程序，它不斷輸出控制檯錯誤引導程序需要Jquery。

在我的node_modules /文件夾我有jquery那裏。

我不完全明白項目的入口點在哪裏。我相信這是packages.json，所以我會從那裏開始

在我的腳本部分

我有

"scripts": { 
    "dev": "node build/dev-server.js", 
    "build": "node build/build.js", 
    "lint": "eslint --ext .js,.vue src" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.1", 
    "vee-validate": "^2.0.0-beta.18", 
    "vue": "^2.1.0", 
    "vue-resource": "^1.0.3", 
    "vue-router": "^2.1.1" 
    },

那麼如果我讀這正確因德爾「開發」的模式，我有建立的/ dev-server.js作爲切入點。

require('./check-versions')() 
var config = require('../config') 
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 
var path = require('path') 
var express = require('express') 
var webpack = require('webpack') 
var opn = require('opn') 
var proxyMiddleware = require('http-proxy-middleware') 
var webpackConfig = require('./webpack.dev.conf')

在代碼中，我嘗試添加var jquery = require('jquery')但這並沒有解決問題該塊。

那麼下一個入口我認爲是webpack的基礎。

，我有

var path = require('path') 
var config = require('../config') 
var utils = require('./utils') 
var projectRoot = path.resolve(__dirname, '../') 
var webpack = require('webpack'); 

var jquery = require("jquery"); 

var env = process.env.NODE_ENV 
// check env & config/index.js to decide whether to enable CSS source maps for the 
// various preprocessor loaders added to vue-loader at the end of this file 
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) 
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) 
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd 

module.exports = { 
    entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: config.build.assetsRoot, 
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 
    filename: '[name].js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.vue', '.json'], 
    fallback: [path.join(__dirname, '../node_modules')], 
    alias: { 
     jquery: "jquery/src/jquery", 
     'vue$': 'vue/dist/vue.common.js', 
     'src': path.resolve(__dirname, '../src'), 
     'assets': path.resolve(__dirname, '../src/assets'), 
     'components': path.resolve(__dirname, '../src/components') 
    } 
    }, 
    resolveLoader: { 
    fallback: [path.join(__dirname, '../node_modules')] 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'eslint', 
     include: [ 
      path.join(projectRoot, 'src') 
     ], 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(js|min.js)$/, 
     loader: 'eslint', 
     include: [ 
      path.join(projectRoot, 'src') 
     ], 
     exclude: /node_modules/ 
     }, 
    ], 
    loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue' 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     include: [ 
      path.join(projectRoot, 'src') 
     ], 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
     { 
     test: require.resolve("jquery"), 
     loader: "expose?$!expose?jQuery" }, 
     { 
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
     } 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
    ], 
    eslint: { 
    formatter: require('eslint-friendly-formatter') 
    }, 
    vue: { 
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), 
    postcss: [ 
     require('autoprefixer')({ 
     browsers: ['last 2 versions'] 
     }) 
    ] 
    } 
}

，我曾嘗試添加需要在頂部，以及決心別名，jQuery插件，我都是從其他教程了。但似乎沒有任何工作。我究竟做錯了什麼？

來源

2017-01-31 173901

[webpack]（https://webpack.github.io/docs/usage.html）文檔的第5步似乎就是您要找的內容。您只需要從應用程序的入口點導入它。這也是一個非常大的webpack基礎。 – tcasey

這基本上是除了任何jquery之外的默認值 – 173901

在webpack.base.conf.js

添加此模塊出口var webpack = require('webpack') 之前，除了：

resolve:{ 
//other code 
plugins:[ 
    new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery:'jquery', 
    jquery:'jquery' 
    }), 
], 
//other code 
}

確保您通過npm install jquery與您需要的特定版本中安裝jQuery。上面的代碼將把3個名字放在窗口對象的下面，你可以在全局訪問jquery，就像你把它作爲腳本標籤導入一樣。

來源

2017-01-31 19:21:34

麻煩添加jQuery的webpack

回答

相關問題