laravel中使用webpack打包jquery运行不了

Question

laravel中使用webpack打包jquery运行不了。

package.json里面是这样的:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap": "4.0.0-beta",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "element-ui": "^1.4.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.23.0"    
  }
}

运行npm run dev打包，没有报错，css能正常显示，但jquery不能使用。其他js包暂不知，因为jquery不能用，到不了使用其他js包的页面。

webpack.mix.js是这样的：

let mix = require('laravel-mix');



mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

webpack.config.js是这样的（自带的，不用自己写）：

require('../src/index');
require(Mix.paths.mix());

Mix.dispatch('init', Mix);

let WebpackConfig = require('../src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

问题：
1、jquery不能使用可能是什么原因？

2、devDependencies和dependencies，好像说是开发环境需要的在devDependencies，生产环境需要的在dependencies。可是上面的包是按照文档命令用npm安装的，有些安装到devDependencies，有些又安装到dependencies。我感觉上面devDependencies里面的包在生产环境都要使用，它怎么给我安装到了devDependencies,而不安装到dependencies？

Answer 1

1. 贴一下 webpack 的 config 文件和 package.json 里面 dev 跑的是哪个命令，根据描述猜测是 webpack 的配置里面把 jquery 写进了 externals 里面，这样需要全局引入 jquery。
2. devDependiencies 和 dependencies 确实一个是构建环境，一个是生产环境。babel-polyfill 是编译时用到的，而其他的都是生产环境需要的，所以理论上你的所有的依赖都是写反的。npm install --save-dev 的包就会进 devDependencies npm install --save 就会写进 dependencies

Answer 2

我一般是关闭了自动导入功能，这样程序只会打包你编写的js

然后你在页面引用jquery、vue等js即可。

解千愁：

const { mix } = require('laravel-mix');
mix.autoload({});