打包文件

vue 结合webpack

Webpack

In your entry file:

这里是webpack.base.conf.js webpack的设置

  1. const createLintingRule = () => ({
  2.   test: /\.(js|vue)$/,
  3.   loader: 'eslint-loader',
  4.   enforce: 'pre',
  5.   include: [resolve('src'), resolve('test')],
  6.   options: {
  7.     formatter: require('eslint-friendly-formatter'),
  8.     emitWarning: !config.dev.showEslintErrorsInOverlay
  9.   }
  10. })
  11. //这个是代码规范检查
  13. module.exports = {
  14.   context: path.resolve(__dirname, '../'),
  15.   entry: {
  16.     app: ['babel-polyfill', './src/main.js']
  17.   },
  18.   output: {
  19.     path: config.build.assetsRoot,
  20.     filename: '[name].js',
  21.     publicPath: process.env.NODE_ENV === 'production'
  22.       ? config.build.assetsPublicPath
  23.       : config.dev.assetsPublicPath
  24.   },
  25.   resolve: {
  26.     extensions: ['.js', '.vue', '.json'],
  27.     alias: {
  28.       'vue$': 'vue/dist/vue.esm.js',
  29.       '@': resolve('src'),
  30.     }
  31.   },
  32.   module: {
  33.     rules: [
  34.       ...(config.dev.useEslint ? [createLintingRule()] : []),
  35.       {
  36.         test: /\.vue$/,//解析vue 文件
  37.         loader: 'vue-loader',
  38.         options: vueLoaderConfig
  39.       },
  40.       {
  41.         test: /\.js$/,//解析js 文件
  42.         loader: 'babel-loader',
  43.         include: [resolve('src'), resolve('test')]
  44.       },
  45.       {
  46.         test: /\.svg$/,//解析svg文件并生成到对应的目录
  47.         loader: 'svg-sprite-loader',
  48.         include: [resolve('src/icons')]
  49.       },
  50.       {
  51.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  52.         loader: 'url-loader',
  53.         exclude: [resolve('src/icons')],
  54.         options: {
  55.           limit: 10000,
  56.           name: utils.assetsPath('img/[name].[hash:7].[ext]')
  57.         }
  58.       },
  59.       {
  60.         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  61.         loader: 'url-loader',//这些类型文件加载并hash化
  62.         options: {
  63.           limit: 10000,
  64.           name: utils.assetsPath('media/[name].[hash:7].[ext]')
  65.         }
  66.       },
  67.       {
  68.         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  69.         loader: 'url-loader',
  70.         options: {
  71.           limit: 10000,
  72.           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  73.         }
  74.       }
  75.     ]
  76.   }

gulp打包

  2. // 创建版本号(年月日时分)  为后来的打包自动生成一个序列做准备
  3. (function () {
  4.   var d = new Date();
  5.   var yy = d.getFullYear().toString().slice(2);
  6.   var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1);
  7.   var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate();
  8.   var h  = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours();
  9.   var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes();
  10.   version = yy + MM + DD + h + mm;
  11.   versionPath = distPath + '/' + version;
  12. })();
  14. // 编译
  15. gulp.task('build', $.shell.task([ 'node build/build.js' ]));
  17. // 创建版本号目录
  18. gulp.task('create:versionCatalog', ['build'], function () {
  19.   return gulp.src(`${distPath}/static/**/*`)
  20.     .pipe(gulp.dest(`${versionPath}/static/`))
  21. });
  23. // 替换${versionPath}/static/js/manifest.js window.SITE_CONFIG.cdnUrl占位变量
  24. gulp.task('replace:cdnUrl', ['create:versionCatalog'], function () {
  25.   return gulp.src(`${versionPath}/static/js/manifest.js`)
  26.     .pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"'))
  27.     .pipe(gulp.dest(`${versionPath}/static/js/`))
  28. });
  30. // 替换${versionPath}/static/config/index-${env}.js window.SITE_CONFIG['version']配置变量
  31. gulp.task('replace:version', ['create:versionCatalog'], function () {
  32.   return gulp.src(`${versionPath}/static/config/index-${env}.js`)
  33.     .pipe($.replace(/window.SITE_CONFIG\['version'\] = '.*'/g, `window.SITE_CONFIG['version'] = '${version}'`))
  34.     .pipe(gulp.dest(`${versionPath}/static/config/`))
  35. });
  37. // 合并${versionPath}/static/config/[index-${env}, init].js 至 ${distPath}/config/index.js
  38. gulp.task('concat:config', ['replace:version'], function () {
  39.   return gulp.src([`${versionPath}/static/config/index-${env}.js`, `${versionPath}/static/config/init.js`])
  40.     .pipe($.concat('index.js'))
  41.     .pipe(gulp.dest(`${distPath}/config/`))
  42. });
  44. gulp.task('default',function () {
  45.   // 获取环境配置
  46.   del([distPath]);
  47.   env = process.env.npm_config_qa ? 'qa' : process.env.npm_config_uat ? 'uat' : 'prod'
  48.   // 开始打包编译
  49.   gulp.start(['build', 'create:versionCatalog', 'replace:cdnUrl', 'replace:version', 'concat:config'], function () {
  50.     // 清除, 编译 / 处理项目中产生的文件
  51.     del([`${distPath}/static`, `${versionPath}/static/config`])
  52.   })
  55. });

以后慢慢解释