grunt中调用webpack

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

grunt结合webpack

下面是 Gruntfile.js

  1 const path = require('path')
  2 const fs = require('fs');
  3 const webpack = require("./webpack.config.js");
  4 const destuglifyls = ['dest/limsStyle/equation.js', 'dest/limsStyle/guidance.js', 'dest/limsStyle/postil.js', 'dest/limsStyle/inject.js', 'dest/limsStyle/designTemp.js'];
  5 const srcbabells = ['limsStyle/postil.js', 'limsStyle/equation.js', 'limsStyle/guidance.js', 'limsStyle/inject.js', 'limsStyle/designTemp.js'];
  6 const srcjshint = ['src/limsStyle/postil.js', 'src/limsStyle/equation.js', 'src/limsStyle/guidance.js', 'src/limsStyle/inject.js', 'src/limsStyle/designTemp.js'];
  7 
  8 module.exports = function (grunt) {
  9   grunt.registerTask('setapi', 'setapi..', function (arg1, arg2) {
 10     var RouteMapLibPath = './dest/limsStyle/RouteMapLib-1.1.js';
 11     var editConfigPath = './dest/lib/ueditor1_4_3-utf8-net/config.js';
 12     var data = fs.readFileSync('./dest/limsStyle/config.json');
 13 
 14     var RouteMapLib = fs.readFileSync(RouteMapLibPath).toString();
 15     var editConfigContent = fs.readFileSync(editConfigPath).toString();
 16     data = JSON.parse(data);
 17     if (typeof arg1 != 'undefined') {
 18       switch (arg1) {
 19         case 'dev':
 20           {
 21             replaceConfig(data.devconfig)
 22           };
 23           break;
 24         case 'test':
 25           {
 26             replaceConfig(data.testconfig)
 27           };
 28           break;
 29         case 'build':
 30           {
 31             replaceConfig(data.buildconfig)
 32           };
 33           break;
 34       }
 35     } else {
 36       replaceConfig(data.location)
 37     }
 38     fs.writeFileSync(RouteMapLibPath, RouteMapLib);
 39     fs.writeFileSync(editConfigPath, editConfigContent);
 40 
 41     function replaceConfig(d) {
 42       RouteMapLib = RouteMapLib.replace('{#ajaxUrl}', d.ajaxUrl);
 43       RouteMapLib = RouteMapLib.replace('{#user_token}', d.user_token);
 44       RouteMapLib = RouteMapLib.replace('{#ELNEdit}', d.ELNEdit);
 45       editConfigContent = editConfigContent.replace('{#server}', d.ajaxUrl.replace('API/', ''));
 46       // console.log(RouteMapLib);
 47     };
 48 
 49   });
 50 
 51 
 52   grunt.initConfig({
 53     clean: ['/dest'],
 54     jshint: {
 55       all: srcjshint,
 56       options: {
 57         jshintrc: '.jshintrc'
 58         // globals: {
 59         //   $: false,
 60         //   jQuery: false
 61         // },
 62         // browser: true,
 63         // laxcomma:true,
 64         // esversion: 6
 65       }
 66     },
 67     webpack: {
 68       options: {
 69         stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
 70       },
 71       dev: webpack
 72     },
 73     // webpack: {
 74     //   options: {
 75     //     stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
 76     //   },
 77     //   prod: webpack,
 78     //   dev: Object.assign({
 79     //     watch: true
 80     //   }, webpack)
 81     // },
 82     watch: {
 83       cwd: 'src',
 84       files: ['src/**/*.js', 'src/**/*.json', 'src/**/*.html', 'src/limsStyle/*.css', 'src/**/*.less'],
 85       tasks: ['webpack:dev','copy:main', 'setapi', 'jshint', 'babel'],
 86       options: {
 87         reload: true,
 88         livereload: 35729
 89       }
 90     },
 91     uglify: {
 92       main: {
 93         files: [{
 94           expand: true,
 95           src: destuglifyls,
 96           // dest: 'dest',
 97           sourceMap: true,
 98           rename: function (dst, src) {
 99             // To keep the source js files and make new files as `*.min.js`:
100             // return dst + '/' + src.replace('.js', '.min.js');
101             // Or to override to src:
102             return src;
103           }
104         }]
105       },
106     },
107     cssmin: {
108       target: {
109         files: [{
110           expand: true,
111           cwd: 'src/limsStyle',
112           src: ['*.css'],
113           dest: 'dest/limsStyle'
114         }]
115       }
116     },
117     copy: {
118       processContentExclude: ['othen/**'],
119       main: {
120         expand: true,
121         cwd: 'src',
122         //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/**'], //** 
123         src: ['limsStyle/**', 'othen/**', '_temp/**', 'images/**', 'layertemplate/**', 'ElnIndex.html', 'designTemplate.html'],
124         dest: 'dest/',
125         flatten: false,
126         filter: 'isFile'
127       },
128       all: {
129         expand: true,
130         cwd: 'src',
131         src: ['**'], //** 
132         dest: 'dest/',
133         flatten: false,
134         filter: 'isFile'
135       }
136     },
137     babel: {
138       options: {
139         sourceMap: true,
140         presets: ['babel-preset-es2015']
141 
142       },
143       dist: {
144         files: [{
145           expand: true,
146           cwd: 'src/',
147           src: srcbabells,
148           dest: 'dest/'
149         }]
150       }
151     },
152     connect: {
153       options: {
154         port: 9000,
155         hostname: 'localhost',
156         livereload: 35729
157       },
158       server: {
159         options: {
160           open: true,
161           base: [
162             "dest"
163           ]
164         }
165       }
166     },
167   });
168 
169   grunt.loadNpmTasks('grunt-contrib-uglify');
170   grunt.loadNpmTasks('grunt-contrib-jshint');
171   grunt.loadNpmTasks('grunt-contrib-copy');
172   grunt.loadNpmTasks('grunt-contrib-clean');
173   grunt.loadNpmTasks('grunt-contrib-watch');
174   grunt.loadNpmTasks('grunt-contrib-connect');
175   grunt.loadNpmTasks('grunt-babel');
176   grunt.loadNpmTasks('grunt-contrib-cssmin');
177   grunt.loadNpmTasks('grunt-webpack');
178   // grunt.registerTask('clean', ['clean:release', 'copy:all']);
179 
180 
181   grunt.registerTask('default', ['copy:main', 'webpack:dev', 'babel', 'cssmin', 'uglify', 'setapi', 'connect', 'watch']); //'uglify', 
182   grunt.registerTask('dev', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:dev'])
183   grunt.registerTask('test', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:test']);
184   grunt.registerTask('build', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:build']);
185 };

下面是 webpack.config.js文件夹

 1 const path = require('path')
 2 const webpack = require('webpack')
 3 const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 const loaderconfig = require('./vue-loader.conf')
 5 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 6 // const packagejson = require('./package.json')
 7 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 8 
 9 module.exports = {
10     entry: './src/vuesrc/main.js',
11     output: {
12         path: path.resolve(__dirname, './src/limsStyle/vuedest/'),
13         filename: 'build.js',
14         chunkFilename: "[id].build.js?[chunkhash]"
15         // vendor: Object.keys(packagejson.dependencies)
16     },
17     devtool: '#eval-source-map',
18     module: {
19         rules: [{
20                 test: /\.vue$/,
21                 loader: 'vue-loader',
22                 options: loaderconfig
23             },
24             {
25                 test: require.resolve('jquery'),
26                 use: [{
27                     loader: 'expose-loader',
28                     options: 'jQuery'
29                 }, {
30                     loader: 'expose-loader',
31                     options: '$'
32                 }]
33             }
34         ]
35     },
36     resolve: {
37         extensions: [' ', '.js', '.vue'],
38         // root:"./node_modules",
39         alias: {
40             'vue$': 'vue/dist/vue.js'
41         }
42     },
43     optimization: {
44         splitChunks: {
45             chunks: 'async',
46             minSize: 10000,
47             maxSize: 0,
48             minChunks: 1,
49             maxAsyncRequests: 5,
50             maxInitialRequests: 3,
51             automaticNameDelimiter: '~',
52             name: true,
53             cacheGroups: {
54                 vendors: {
55                     test: /[\\/]node_modules[\\/]/,
56                     priority: -10,
57                     name: "vendors"
58                 },
59                 default: {
60                     minChunks: 2,
61                     priority: -20,
62                     reuseExistingChunk: true
63                 }
64             }
65         },
66         runtimeChunk: {
67             name: entrypoint => `manifest.${entrypoint.name}`
68         }
69     },
70     plugins: [
71         new HtmlWebpackPlugin({
72             filename: 'design.html',
73             template: './src/vuesrc/index.html',
74             inject: true,
75             minify: {
76                 removeComments: true,
77                 collapseWhitespace: true,
78                 removeAttributeQuotes: true
79                 // more options:
80                 // https://github.com/kangax/html-minifier#options-quick-reference
81             },
82             // necessary to consistently work with multiple chunks via CommonsChunkPlugin
83             chunksSortMode: 'dependency'
84         }),
85         new VueLoaderPlugin(),
86         // new BundleAnalyzerPlugin()
87     ]
88 }