Laravel 使用 Laravel Mix 打包前端静态资源,引入 Vue

Laravel 的静态资源处理方式不断更新,5.4 版本从 基于 gulp 的 laravel-elixir 完全升级到构建于 webpack 之上的 laravel-mix。

项目原来的打包策略

1445238527elixir-1024x549.jpg


本站基于 Laravel 开发,更新到 Laravel 5.4 之前的静态资源打包混合使用laravel-elixir(gulp)webpack,由于要实现静态资源(主要是 js)跟随版本的模块化加载,以便下一步实现静态资源分离,使用 CDN 加速(本站使用七牛),其时的gulpfile.js打包脚本如下:

/* ...省略了一些变量定义代码... */

elixir(function (mix) {
    /* bootstrap 字库 */
    mix.copy(AWESOME_FONT_PATH, `${DIST_PATH}/fonts`);

    /* 复制图片 */
    mix.copy('resources/assets/img', `${DIST_PATH}/img`);

    /* CSS 处理 */
    mix.sass('lib.scss', `${DIST_PATH_WITH_VERSION}/css/lib.css`);
    mix.sass('app.scss', `${DIST_PATH_WITH_VERSION}/css/app.css`);
    mix.sass('control.scss', `${DIST_PATH_WITH_VERSION}/css/control.css`);

    /* JS 处理 */
    mix.webpack([], `${DIST_PATH_WITH_VERSION}/js`);
});

webpack.config.js文件中的处理脚本如下:

/* ...省略了一些变量定义代码... */

// webpack 入口
let entry = {
    vendor: ['jquery', 'bootstrap-sass']
};

/**
 * 生成文件入口
 */
_.forEach(JS_MODULES, module => {
    if (module !== 'helpers') {
        entry[module] = path.resolve(JS_PATH, module, 'index.js');
    }
});

//noinspection JSUnresolvedVariable
module.exports = {
    entry: entry,
    output: {
        filename: '[name].bundle.js'
    },
    resolve: {
        alias: {
            'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
        }
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],
        }),
    ],
};

更新到 Laravel 5.4 之后项目的打包策略


1-LthzZzfbaat9WPg6hQRCNg.png


更新到 Laravel 5.4 之后,全部使用 webpack 来打包静态资源,迁移步骤如下:

  1. 参考 Laravel 5.4 更新 package.json 文件;
  2. 添加webpack.mix.js文件;
  3. 复制一份webpack.config.js文件到项目的根目录(备份好原有的配置文件):

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

    删除package.json文件scripts字段中如下参数配置,以加载使用复制的配置文件

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

    使用复制的 webpack 配置文件的原因是要支持模块化跟随版本的打包方式,实际上仅仅修改了原有配置中的输出路径。

  4. 迁移原有的配置,webpack.mix.js文件更新如下:

    const { mix } = require('laravel-mix');
    
    /* ...省略了一些变量定义代码... */
    
    /* CSS 处理 */
    mix.sass('resources/assets/sass/lib.scss', `${DIST_PATH_WITH_VERSION}/css/lib.css`)
        .sass('resources/assets/sass/app.scss', `${DIST_PATH_WITH_VERSION}/css/app.css`)
        .sass('resources/assets/sass/control.scss', `${DIST_PATH_WITH_VERSION}/css/control.css`);
    
    /* JS 处理 */
    _.forEach(JS_MODULES, module => {
        if (module !== 'helpers') {
            mix.js(`${JS_PATH}/${module}/index.js`, `${DIST_PATH_WITH_VERSION}/js/${module}.bundle.js`);
        }
    });
    
    /* Vue 处理 */
    mix.js('resources/vue/index.js', `${DIST_PATH_WITH_VERSION}/js/vue.bundle.js`);
    
    /* 公共库 */
    mix.extract(['jQuery', 'vue'], `${DIST_PATH_WITH_VERSION}/js/vendor.bundle.js`);
    

    可以看到,添加了 Vue 处理路径配置,具体的处理脚本,原作者已经在webpack.config.js中写好了!


无论是原有的打包方式,还是新的打包方式,,我们要做的也就是根据项目规划,配置一下打包文件入口和输出而已,其他的处理,Laravel 已经配置好了。

随笔 Laravel Mix Vue webpack 静态资源打包
本文更新于