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()
     ]
 }