weixin_34068198
weixin_34068198

【Vue】Vue1.0+Webpack1+Gulp项目升级构建方案的踩坑路

最近半年在维护公司的一个管理后台项目，搭建之初的技术栈比较混乱，构建方案采用了Gulp中调用Webpack的方式，Gulp负责处理.html文件，Webpack负责加载.vue、.js等。而在这一套构建方案中，主要有这些问题：

  1. 没有实现JS压缩、CSS兼容等功能。
  2. 在开发模式下，保存代码，项目会进行完全的重新打包，持续构建速度不仅缓慢，还会产生缓存的现象（构建完成后刷新页面改动不生效）。
  3. 由于目前的方案没有使用http-proxy-middleware这样的请求代理模块，导致项目在本地开发时还要部署后端服务，对新接手的开发者不友好，而且经常由于沟通不及时产生测试环境与本地环境的代码同步问题。

因此，在熟悉这个项目之后，打算对其构建方案进行升级，主要为了解决上述的问题。

1. 原有构建方案描述

原有构建速度

  • npm run build：打包约50s
  • npm run dev：开启开发模式约50s，保存自动重新编译需约6s，编译完成后需要刷新才能看到效果，偶尔因缓存问题需要再次自动重新编译才能看到效果

原有构建结果

  • ./build/development：存放渲染后的js文件
  • ./build/html：存放渲染后的html文件
  • ./build/rev：保存各个入口文件hash值的json文件

打包代码解析

/**
 * 使用gulp-clean插件删除build目录下的文件
 */
gulp.task('clean', function () {
    if (!stopClean) {
        return gulp.src('build/' + directory, { read: false }).pipe(clean())
    }
})
/**
 * 使用webpack打包vue与js文件，在clean之后进行
 */
gulp.task('webpack', ['clean'], function (callback) {
    deCompiler.run(function (err, stats) {
        if (err) throw new gutil.PluginError('webpack', err)
        gutil.log('[webpack]', stats.toString({}))
        callback()
    })
})
/**
 * 使用gulp-uglify插件对js文件进行丑化，在webpack之后进行
 */
gulp.task('minify', ['webpack'], function () {
    if (environment) {
        return
    } else {
        return gulp.src('build/' + directory + '/*.js').pipe(uglify())
    }
})
/**
 * 使用gulp-rev插件为打包后的文件增加hash，在minify之后运行
 * 
 * gulp-rev会做什么：
 * 根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。
 * 替换html里静态资源的路径为带有md5值的文件路径，这样html才能找到资源路径。
 * 有些人可能会做：静态服务器配置静态资源的过期时间为永不过期。
 * 达到什么效果：
 * 静态资源只需请求一次，永久缓存，不会发送协商请求304
 * 版本更新只会更新修改的静态资源内容
 * 不删除旧版本的静态资源，版本回滚的时候只需要更新html，同样不会增加http请求次数
 */
gulp.task('hashJS', ['minify'], function () {
    var dest = gulp.src(['一串入口文件...'])
        .pipe(rev()) // 设置文件的hash key
        .pipe(gulp.dest('build/' + directory)) // 将经过管道处理的文件写出到目录
        .pipe(rev.manifest({})) // 生成映射hash key的json
        .pipe(gulp.dest('build/rev')) // 将经过管道处理的文件写出到目录
    !environment && gulp.src(['一串入口文件...']).pipe(clean())
    return dest
})
/**
 * 使用gulp-rev-replace插件为html中引用的js和css替换新的hash
 * 使用gulp-livereload插件在所有文件重新打包完成后局部更新页面
 */
gulp.task('revReplace', ['hashJS'], function () {
    return gulp.src(['html/*.html'])
        .pipe(revReplace({ ... })) // 给html中的js引用提供新的hash
        .pipe(gulp.dest('build/html')) // 输出文件
        .pipe(livereload()) // 局部更新页面
})
/**
 * 使用gulp.watch，当应用程序目录下有任何文件发生改变，则重新执行一遍打包命令
 * gulp.watch：监视文件，并且可以在文件发生改动时候做一些事情。
 */
gulp.task('watch', ['revReplace'], function () {
    stopClean = true
    livereload.listen()
    gulp.watch('app/**/*', ['clean', 'webpack', 'minify', 'hashJS', 'revReplace'])
})
/**
 * 输出dev和build的工作流
 */
gulp.task('default', ['clean', 'webpack', 'minify', 'hashJS', 'revReplace', 'watch']) // dev
gulp.task('build', ['clean', 'webpack', 'minify', 'hashJS', 'revReplace']) // build
/**
 * webpack配置
 */
var devCompiler = webpack({
    entry: {
        ... // 一众入口文件
        vendor: ['vue', 'vue-router', 'lodash', 'echarts'] // 公共模块
    },
    output: {
        path: ..., // 所有输出文件的目标路径
        publicPath: ..., // 输出解析文件的目录
        filename: ..., // 输出文件
        chunkFilename: ... // 通过异步请求的文件
    },
    // 排除以下内容打包到 bundle，减小文件大小
    external: {
        jquery: 'jQuery',
        dialog: 'dialog'
    },
    plugins: [
        /**
         * 通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。
         * 这个带来页面速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
         */
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor']
        }),
        /**
         * DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。
         */
        new webpack.DefinePlugin({
            __VERSION__: new Date().getTime()
        })
    ],
    resolve: {
        root: __dirname,
        extensions: ['', '.js', '.vue', '.json'], // 解析组件的文件后缀白名单
        alias: { ... } // 配置路径别名
    },
    module: {
        // 各个文件的loaders
        loaders: [
            { test: /\.vue$/, loader: 'vue-loader' },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.jsx$/, loader: 'babel-loader', include: [path.join(__dirname, 'app')], exclude: /core/ },
            { test: /\.json$/, loader: 'json' }
        ]
    },
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    }
})
复制代码

2. 将Gulp的功能移到Webpack1上执行

使用html-webpack-plugin插件构建项目的主.html文件

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            filename: '...', // 输出的路径
            template: '...', // 提取源html的路径
            chunks: ['...'], // 需要导入的模块
            inject: true // 是否附加到body底部
        })
    ]
}
复制代码

使用webpack.optimize.UglifyJsPlugin插件进行JS压缩

module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false }
        })
    ]
}
复制代码

使用webpack-dev-server模块，提供node搭建的开发环境

module.exports = {
    devServer: {
        clientLogLevel: 'warning', // 输出日志的级别，配置为警告级别以上才输出
        inline: true, // 启动 live reload
        hot: true, // 允许启用热重载
        compress: true, // 对所有静态资源进行gzip压缩
        open: true, // 默认在启动本地服务时打开浏览器
        quiet: true, // 禁止输出繁杂的构建日志
        host: ..., // 服务启动的域名
        port: ..., // 服务启动的端口
        proxy: { ... }, // http代理配置
        /**
         * 这个配置常用于解决spa应用h5路由模式下将所有404路由匹配回index.html的问题
         * 由于生产环境为主页匹配了一个比较简单的别名，因此开发环境也照搬后端服务的配置
         */
        historyApiFallback: {
            rewrites: [{ from: '/^\/admin/', to: '...' }]
        }
    }
}
复制代码

踩坑

  1. [email protected] requires a peer of webpack^@4.0.0 but none is installed.：这两个模块版本不兼容，回退到webpack-dev-server@2成功运行。
  2. Cannot resolve module 'fsevents' ...：将全局的webpack调用改为直接从node_modules/webpack下直接调用，解决了问题，node node_modules/webpack/bin/webpack.js --config webpack.config.js。
  3. Cannot resolve module 'fs' ...：配置config.node.fs = 'empty'，为Webpack提供node原生模块，使其能加载到这个对象。
  4. 热重载只对.js和.css及.vue中的