close boylegu#39 resolve can't build dev env

Author: 顾鲍尔

.gitignore

@@ -24,7 +24,6 @@ target/springboot_vue-0.0.1-SNAPSHOT.jar.original
 
 ### NetBeans ###
 nbproject/private/
-build/
 nbbuild/
 dist/
 nbdist/

frontend/build/config.js

@@ -0,0 +1,17 @@
+/**
+ * Created by gubaoer on 17/5/10.
+ */
+
+
+var path = require('path');
+module.exports = {
+    dev: {
+        outputPath: path.resolve(__dirname, '../dist'),
+        outputPublicPath: '/',
+        port: 8080
+    },
+    prod: {
+        outputPath: path.resolve(__dirname, '../dist'),
+        outputPublicPath: '/'
+    }
+}

frontend/build/dev.js

@@ -0,0 +1,23 @@
+/**
+ * Created by gubaoer on 17/5/11.
+ */
+
+var webpack = require('webpack');
+var webpackDevServer = require('webpack-dev-server');
+var devConfig = require("./webpack.dev.config");
+var config = require("./config");
+var compiler = webpack(devConfig);
+var server = new webpackDevServer(compiler, {
+    hot: true,
+    noInfo: true,
+    publicPath: config.dev.outputPublicPath,
+    stats: { colors: true }
+});
+server.listen(config.dev.port, "0.0.0.0");
+var url = `http://localhost:${config.dev.port}/`;
+var opn = require('opn');
+// auto start brower
+server.middleware.waitUntilValid(function() {
+    console.log(`> Listening at ${url}`);
+    opn(`${url}`);
+})

frontend/build/prod.js

@@ -0,0 +1,9 @@
+/**
+ * Created by gubaoer on 17/5/11.
+ */
+
+var webpack = require("webpack");
+var prodWebpackConfig = require('./webpack.prod.config');
+webpack(prodWebpackConfig, function (err, stats) {
+    process.stdout.write(stats.toString());
+});

frontend/build/utils.js

@@ -0,0 +1,50 @@
+/**
+ * Created by gubaoer on 17/5/10.
+ */
+
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var isProd = process.env.NODE_ENV === "production";
+
+var cssLang = [{
+    name: 'css',
+    reg: /\.css$/,
+    loader: 'css-loader'
+}];
+
+function genLoaders(lang) {
+    var loaders = ['css-loader', 'postcss-loader'];
+    if (lang.name !== 'css') {
+        loaders.push(lang.loader);
+    }
+    if (isProd) {
+
+        loaders = ExtractTextPlugin.extract({
+            use: loaders
+        });
+    } else {
+
+        loaders.unshift('vue-style-loader');
+    }
+    return loaders;
+}
+
+exports.styleLoaders = function() {
+    var output = [];
+    cssLang.forEach(lang => {
+        output.push({
+            test: lang.reg,
+            use: genLoaders(lang)
+        })
+    });
+    return output;
+};
+// options of vue-loader
+exports.vueLoaderOptions = function() {
+    var options = {
+        loaders: {}
+    };
+    cssLang.forEach(lang => {
+        options.loaders[lang.name] = genLoaders(lang);
+    });
+    return options;
+};

frontend/build/webpack.base.config.js

@@ -0,0 +1,52 @@
+/**
+ * Created by gubaoer on 17/5/10.
+ */
+var webpack = require('webpack');
+var path = require('path');
+var utils = require('./utils');
+
+function resolve(relPath) {
+    return path.resolve(__dirname, relPath);
+}
+
+module.exports = {
+    entry: {app: resolve('../src/main.js')},
+    output: {
+        filename: 'js/[name].js'
+    },
+    module: {
+        rules: [{
+            test: /\.js$/,
+            use: "babel-loader",
+            include: [resolve('../src')]
+        },
+            {
+                test: /\.vue$/,
+                use: {
+                    loader: "vue-loader",
+                    options: utils.vueLoaderOptions()
+                }
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                use: {
+                    loader: "url-loader",
+                    options: {
+                        limit: 10000,
+                        name: 'images/[name].[hash:7].[ext]'
+                    }
+                }
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                use: [{
+                    loader: "url-loader",
+                    options: {
+                        limit: 10000,
+                        name: 'fonts/[name].[hash:7].[ext]'
+                    }
+                }]
+            }
+        ]
+    }
+}

frontend/build/webpack.dev.config.js

@@ -0,0 +1,35 @@
+/**
+ * Created by gubaoer on 17/5/10.
+ */
+
+var webpack = require('webpack');
+var merge = require('webpack-merge');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var baseWebpackConfig = require('./webpack.base.config.js');
+var utils = require('./utils');
+var config = require('./config');
+
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+    baseWebpackConfig.entry[name] = [
+        `webpack-dev-server/client?http://localhost:${config.dev.port}/`,
+        "webpack/hot/dev-server"
+    ].concat(baseWebpackConfig.entry[name])
+});
+
+module.exports = merge(baseWebpackConfig, {
+    output: {
+        path: config.dev.outputPath,
+        publicPath: config.dev.outputPublicPath
+    },
+    module: {
+        rules: utils.styleLoaders()
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'index.html',
+            inject: true
+        })
+    ]
+})

frontend/build/webpack.prod.config.js

@@ -0,0 +1,48 @@
+/**
+ * Created by gubaoer on 17/5/10.
+ */
+
+process.env.NODE_ENV = 'production';
+var webpack = require('webpack');
+var merge = require('webpack-merge');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var path = require('path');
+var baseWebpackConfig = require('./webpack.base.config.js');
+var utils = require('./utils');
+var config = require('./config');
+
+module.exports = merge(baseWebpackConfig, {
+    output: {
+        path: config.prod.outputPath,
+        publicPath: config.prod.outputPublicPath,
+        filename: 'js/[name].js?[chunkhash]'
+    },
+    module: {
+        rules: utils.styleLoaders()
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': '"production"'
+        }),
+        new webpack.optimize.UglifyJsPlugin(),
+        new ExtractTextPlugin({
+            filename: "css/style.css?[contenthash:8]"
+        }),
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor',
+            minChunks: function (module, count) {
+                return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
+            }
+        }),
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'manifest',
+            chunks: ['vendor']
+        }),
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'index.tpl.html',
+            inject: true
+        })
+    ]
+})