使用 node_modules/.bin/webpack 时无法读取未定义的属性（mix.initialize()）

Question

我正在尝试使用 node_modules/.bin/webpack 进行编译，但出现此错误：

Mix.initialize();       
   ^       
TypeError: Cannot read property 'initialize' of undefined      
at Object.<anonymous> (/home/vagrant/Code/stream/webpack.config.js:9:4)            
at Module._compile (module.js:570:32)      
at Object.Module._extensions..js (module.js:579:10)      
at Module.load (module.js:487:32)  
at tryModuleLoad (module.js:446:12)      
at Function.Module._load (module.js:438:3)       
at Module.require (module.js:497:17)      
at require (internal/module.js:20:19)      
at requireConfig 
(/home/vagrant/Code/stream/node_modules/webpack/bin/convert-argv.js:97:18)     
at /home/vagrant/Code/stream/node_modules/webpack/bin/convert-argv.js:104:17    

webpack.mix.js：

let mix = require('laravel-mix').mix;       
mix.js('resources/assets/js/app.js', 'public/js')      
.sass('resources/assets/sass/app.scss', 'public/css');    

webpack.config.js：

var path = require('path');       
var webpack = require('webpack');      
var Mix = require('laravel-mix').config;    
var plugins = require('laravel-mix').plugins;    
Mix.initialize();

我正在关注这个视频：https://laracasts.com/series/learn-vue-2-step-by-step/episodes/26?autoplay=true

并在 03:29 崩溃，非常感谢任何帮助。

Answer 1

在最新版本的 laravel-mix 中，您不需要 require mix 属性。根据库documentation，您只需要在 webpack.mix.js 文件中：

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

同样在 package.json 的部分脚本中，您应该使用 laravel-mix 获得供应商文件的路径（如果您不需要自定义配置），例如：

  "scripts": {
     "dev": "webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

Answer 2

好吧，我终于做到了。

在视频中，他在开头删除了一些 package.json 包。 （包括 laravel-mix），然后他安装 laravel-mix 0.3 版本。

所以当我创建 laravel 项目时，我不会删除 laravel-mix（版本是“0.*”。如果我这样做并且我运行 npm run dev 总是好的。

我不明白为什么他之前删除包并安装它，然后这样做

cp -r node_modules/laravel-mix/setup/** ./

希望这对某人有用。

Answer 3

我正在关注同一个视频。以下是我为克服同样的错误而采取的步骤：

1. $laravel new stream --dev
2. $cd stream
3. $npm install
4. $npm install babel-loader sass-loader vue-loader --save-dev
5. $cp node_modules/laravel-mix/setup/webpack.config.js ./

6. 打开 ./webpack.config.js 并使其如下所示：

   require('./node_modules/laravel-mix/src/index');
   require(Mix.paths.mix());
   Mix.dispatch('init', Mix);
   let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');
   module.exports = new WebpackConfig().build();
   

7. $node_modules/.bin/webpack

8. 在视频中 1:32 左右拿起它

我在视频中也遇到了更多问题。如果我找到解决方案，我会更新这个答案。