grunt中调用webpack

项目中一些很老的技术需要运用webpack管理，这时候必须使用grunt+webpack 配合使用 。做个笔记，不限多说直接上代码

grunt结合webpack

下面是 Gruntfile.js

const path = require('path')
const fs = require('fs');
const webpack = require("./webpack.config.js");
const destuglifyls = ['dest/limsStyle/equation.js', 'dest/limsStyle/guidance.js', 'dest/limsStyle/postil.js', 'dest/limsStyle/inject.js', 'dest/limsStyle/designTemp.js'];
const srcbabells = ['limsStyle/postil.js', 'limsStyle/equation.js', 'limsStyle/guidance.js', 'limsStyle/inject.js', 'limsStyle/designTemp.js'];
const srcjshint = ['src/limsStyle/postil.js', 'src/limsStyle/equation.js', 'src/limsStyle/guidance.js', 'src/limsStyle/inject.js', 'src/limsStyle/designTemp.js'];

module.exports = function (grunt) {
  grunt.registerTask('setapi', 'setapi..', function (arg1, arg2) {
    var RouteMapLibPath = './dest/limsStyle/RouteMapLib-1.1.js';
    var editConfigPath = './dest/lib/ueditor1_4_3-utf8-net/config.js';
    var data = fs.readFileSync('./dest/limsStyle/config.json');

    var RouteMapLib = fs.readFileSync(RouteMapLibPath).toString();
    var editConfigContent = fs.readFileSync(editConfigPath).toString();
    data = JSON.parse(data);
    if (typeof arg1 != 'undefined') {
      switch (arg1) {
        case 'dev':
          {
            replaceConfig(data.devconfig)
          };
          break;
        case 'test':
          {
            replaceConfig(data.testconfig)
          };
          break;
        case 'build':
          {
            replaceConfig(data.buildconfig)
          };
          break;
      }
    } else {
      replaceConfig(data.location)
    }
    fs.writeFileSync(RouteMapLibPath, RouteMapLib);
    fs.writeFileSync(editConfigPath, editConfigContent);

    function replaceConfig(d) {
      RouteMapLib = RouteMapLib.replace('{#ajaxUrl}', d.ajaxUrl);
      RouteMapLib = RouteMapLib.replace('{#user_token}', d.user_token);
      RouteMapLib = RouteMapLib.replace('{#ELNEdit}', d.ELNEdit);
      editConfigContent = editConfigContent.replace('{#server}', d.ajaxUrl.replace('API/', ''));
      // console.log(RouteMapLib);
    };

  });


  grunt.initConfig({
    clean: ['/dest'],
    jshint: {
      all: srcjshint,
      options: {
        jshintrc: '.jshintrc'
        // globals: {
        //   $: false,
        //   jQuery: false
        // },
        // browser: true,
        // laxcomma:true,
        // esversion: 6
      }
    },
    webpack: {
      options: {
        stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
      },
      dev: webpack
    },
    // webpack: {
    //   options: {
    //     stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
    //   },
    //   prod: webpack,
    //   dev: Object.assign({
    //     watch: true
    //   }, webpack)
    // },
    watch: {
      cwd: 'src',
      files: ['src/**/*.js', 'src/**/*.json', 'src/**/*.html', 'src/limsStyle/*.css', 'src/**/*.less'],
      tasks: ['webpack:dev','copy:main', 'setapi', 'jshint', 'babel'],
      options: {
        reload: true,
        livereload: 35729
      }
    },
    uglify: {
      main: {
        files: [{
          expand: true,
          src: destuglifyls,
          // dest: 'dest',
          sourceMap: true,
          rename: function (dst, src) {
            // To keep the source js files and make new files as `*.min.js`:
            // return dst + '/' + src.replace('.js', '.min.js');
            // Or to override to src:
            return src;
          }
        }]
      },
    },
    cssmin: {
      target: {
        files: [{
          expand: true,
          cwd: 'src/limsStyle',
          src: ['*.css'],
          dest: 'dest/limsStyle'
        }]
      }
    },
    copy: {
      processContentExclude: ['othen/**'],
      main: {
        expand: true,
        cwd: 'src',
        //src: ['**', '!*.sln', '!**lib/diff/**', '!**lib/layer-v3.1.1/**', '!**lib/layerdate/**', '!**.vs/**', '!**lib/bootstrap-3.3.7-dist/**', '!**lib/ueditor1_4_3-utf8-net/third-party/**', '!**lib/ueditor1_4_3-utf8-net/third-party/dialogs/**'], //** 
        src: ['limsStyle/**', 'othen/**', '_temp/**', 'images/**', 'layertemplate/**', 'ElnIndex.html', 'designTemplate.html'],
        dest: 'dest/',
        flatten: false,
        filter: 'isFile'
      },
      all: {
        expand: true,
        cwd: 'src',
        src: ['**'], //** 
        dest: 'dest/',
        flatten: false,
        filter: 'isFile'
      }
    },
    babel: {
      options: {
        sourceMap: true,
        presets: ['babel-preset-es2015']

      },
      dist: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: srcbabells,
          dest: 'dest/'
        }]
      }
    },
    connect: {
      options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729
      },
      server: {
        options: {
          open: true,
          base: [
            "dest"
          ]
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-webpack');
  // grunt.registerTask('clean', ['clean:release', 'copy:all']);


  grunt.registerTask('default', ['copy:main', 'webpack:dev', 'babel', 'cssmin', 'uglify', 'setapi', 'connect', 'watch']); //'uglify', 
  grunt.registerTask('dev', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:dev'])
  grunt.registerTask('test', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:test']);
  grunt.registerTask('build', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:build']);
};

 

下面是 webpack.config.js文件夹

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const loaderconfig = require('./vue-loader.conf')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// const packagejson = require('./package.json')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    entry: './src/vuesrc/main.js',
    output: {
        path: path.resolve(__dirname, './src/limsStyle/vuedest/'),
        filename: 'build.js',
        chunkFilename: "[id].build.js?[chunkhash]"
        // vendor: Object.keys(packagejson.dependencies)
    },
    devtool: '#eval-source-map',
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: loaderconfig
            },
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ]
    },
    resolve: {
        extensions: [' ', '.js', '.vue'],
        // root:"./node_modules",
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
    },
    optimization: {
        splitChunks: {
            chunks: 'async',
            minSize: 10000,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    name: "vendors"
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        },
        runtimeChunk: {
            name: entrypoint => `manifest.${entrypoint.name}`
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'design.html',
            template: './src/vuesrc/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'dependency'
        }),
        new VueLoaderPlugin(),
        // new BundleAnalyzerPlugin()
    ]
}