laravel修改webpack.config.js

问题描述

在laravel框架中使用vue脚手架，无法直接修改 webpack.config.js 。

解决方法

在 package.json 文件中我们看到 webpack.config.js 文件在 node_modules/laravel-mix/setup/webpack.config.js ，把它复制到项目根目录。

cp node_modules/laravel-mix/setup/webpack.config.js .

安装 webpack-merge

yarn add webpack-merge

编辑根目录下的 webpack.config.js ，下面是一个例子。

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */
let mix = require('./node_modules/laravel-mix/src/index');

let ComponentFactory = require('./node_modules/laravel-mix/src/components/ComponentFactory');

new ComponentFactory().installAll();

require(Mix.paths.mix());

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');

let MergeConfig = require("webpack-merge");
const webpackConfig = new WebpackConfig().build();

const AddWebpackConfig = {
    resolve: {
        alias: {
            '@': path.resolve('resources/vue')
        }
    }
}
module.exports = MergeConfig(webpackConfig, AddWebpackConfig)