feat: 整理前端代码

.gitignore

@@ -1,2 +1,2 @@
-
+node_modules/
 request.php

.npmrc

@@ -0,0 +1,2 @@
+registry = http://registry.npm.taobao.org/
+

build/build.js

@@ -0,0 +1,37 @@
+'use strict';
+process.env.NODE_ENV = 'production';
+const ora = require('ora');
+const rm = require('rimraf');
+const path = require('path');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const webpackConfig = require('./webpack.prod.conf');
+
+const spinner = ora('building for production...');
+spinner.start();
+
+rm(path.join(__dirname, '../dist'), err => {
+  if (err) throw err;
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop();
+    if (err) throw err;
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n');
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'));
+      process.exit(1);
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'));
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ));
+  });
+});

build/dev-server.js

@@ -0,0 +1,31 @@
+var path = require('path');
+var webpack = require('webpack');
+var webpackConfig = require('./webpack.dev.conf');
+const WebpackDevServer = require('webpack-dev-server');
+
+// 遍历每个entry，加入dev-server client
+Object.keys(webpackConfig.entry).forEach(function(name) {
+  let _devServer = `webpack-dev-server/client?http://localhost:3000`;
+  webpackConfig.entry[name] = [_devServer].concat(webpackConfig.entry[name]);
+});
+
+var compiler = webpack(webpackConfig);
+
+const devServerOptions = {
+  disableHostCheck: true,
+  host: '0.0.0.0',
+  after(app) {
+    // 自动打开浏览器
+    // if (opts.BUILD_SKIN) {
+    //   opn(
+    //     `http://localhost:3000/index.html`
+    //   );
+    // }
+  }
+};
+
+WebpackDevServer.addDevServerEntrypoints(webpackConfig, devServerOptions);
+const devServer = new WebpackDevServer(compiler, devServerOptions);
+devServer.listen(3000, '0.0.0.0', () => {
+  console.log(`Starting server ...`);
+});

build/webpack.base.conf.js

@@ -0,0 +1,111 @@
+var path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+function resolve(dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+let lessLoader = [
+  MiniCssExtractPlugin.loader,
+  `css-loader?minimize`,
+  {
+    loader: 'postcss-loader',
+    options: {
+      ident: 'postcss',
+      plugins: [require('autoprefixer')()]
+    }
+  },
+  'less-loader'
+];
+
+let babelrc = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+        targets: {},
+        useBuiltIns: 'usage'
+      }
+    ]
+  ],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-transform-modules-commonjs',
+    '@babel/plugin-syntax-dynamic-import'
+  ]
+};
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    index: ['./src/index']
+  },
+  output: {
+    path: '/',
+    publicPath: '/',
+    filename: '[name].js',
+    chunkFilename: '[name].js'
+  },
+
+  resolve: {
+    extensions: ['.js', '.json', '.vue'],
+    alias: {
+      vue: 'vue/dist/vue.esm.js'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        exclude: /node_modules/,
+        loader: 'vue-loader',
+        include: resolve('src'),
+        query: {
+          presets: ['vue']
+        }
+      },
+      {
+        test: /\.(less|css)$/,
+        use: lessLoader
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loaders: 'babel-loader',
+        include: resolve('src'),
+        query: babelrc
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        exclude: /node_modules/,
+        include: resolve('src'),
+        loaders: [
+          {
+            loader: 'url-loader',
+            options: {
+              name: `/image/[name].[hash:8].[ext]`
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: '/fonts/[name].[hash:8].[ext]'
+        }
+      }
+    ]
+  },
+  plugins: [new VueLoaderPlugin()].concat(
+    new HtmlWebpackPlugin({
+      env: process.env.NODE_ENV,
+      filename: 'index.html',
+      template: './src/index.html'
+    })
+  )
+};

build/webpack.dev.conf.js

@@ -0,0 +1,24 @@
+var webpack = require('webpack');
+var merge = require('webpack-merge');
+var baseConfig = require('./webpack.base.conf');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+const devWebpackConfig = merge(baseConfig, {
+  mode: 'development',
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  optimization: {
+    noEmitOnErrors: true
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new FriendlyErrorsPlugin()
+  ]
+});
+module.exports = devWebpackConfig;

build/webpack.prod.conf.js

@@ -0,0 +1,41 @@
+let webpack = require('webpack');
+let merge = require('webpack-merge');
+let baseWebpackConfig = require('./webpack.base.conf');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+let UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const os = require('os');
+
+const prodConfig = merge(baseWebpackConfig, {
+  mode: 'production',
+  devtool: false, // 生产环境生成sourcemap
+  output: {
+    filename: `[name].[chunkhash:8].js`,
+    chunkFilename: `[name].[chunkhash:8].js`
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: process.env.NODE_ENV
+      }
+    }),
+
+    new UglifyJSPlugin({
+      uglifyOptions: {
+        compress: {
+          drop_console: true,
+          reduce_funcs: false
+        }
+      },
+      cache: true,
+      parallel: os.cpus().length,
+      sourceMap: false
+    }),
+
+    new MiniCssExtractPlugin({
+      filename: `[name].[contenthash:8].css`
+    })
+  ]
+});
+
+module.exports = prodConfig;

config/dev.env.js

@@ -0,0 +1,7 @@
+"use strict";
+const merge = require("webpack-merge");
+const prodEnv = require("./prod.env");
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+});

config/index.js

@@ -0,0 +1,58 @@
+'use strict';
+const path = require('path');
+
+module.exports = {
+  dev: {
+    assetsSubDirectory: 'assets',
+    assetsPublicPath: '/',
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: true,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: '/',
+    assetsPublicPath: '/',
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+};

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}