webpack – 之美

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

项目原来的打包策略

本站基于 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 之后项目的打包策略

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

参考 Laravel 5.4 更新 package.json 文件；
添加webpack.mix.js文件；
复制一份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 配置文件的原因是要支持模块化跟随版本的打包方式，实际上仅仅修改了原有配置中的输出路径。
迁移原有的配置，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 已经配置好了。

标签： webpack

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