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 已经配置好了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注