firt start

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions"]
+        }
+      }
+    ]
+  ],
+  "plugins": ["transform-runtime"]
+}

.gitignore

@@ -1,29 +1,6 @@
-# built application files
-*.apk
-*.ap_
-
-# files for the dex VM
-*.dex
-
-# Java class files
-*.class
-
-# generated files
-bin/
-gen/
-
-# Local configuration file (sdk path, etc)
-local.properties
-
-# Eclipse project files
-.classpath
-.project
-
-# Proguard folder generated by Eclipse
-proguard/
-
-# Intellij project files
-*.iml
-*.ipr
-*.iws
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
 .idea/
+dist.tar.gz

build/webpack.common.conf.js

@@ -0,0 +1,94 @@
+const webpack = require("webpack");
+const merge = require("webpack-merge");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+const path = require("path");
+
+const productionConfig = require("./webpack.prod.conf.js"); // 引入生产环境配置文件
+const developmentConfig = require("./webpack.dev.conf.js"); // 引入开发环境配置文件
+/**
+ * 根据不同的环境，生成不同的配置
+ * @param {String} env "development" or "production"
+ */
+const generateConfig = env => {
+  // 将需要的Loader和Plugin单独声明
+  const isDev = env === "development"
+
+  let scriptLoader = [
+    {
+      loader: "babel-loader"
+    }
+  ];
+
+  let cssLoader = [
+    {
+      loader: "css-loader",
+      options: {
+        minimize: true,
+        sourceMap: env === "development" ? true : false // 开发环境：开启source-map
+      }
+    }
+  ];
+
+  let styleLoader =
+    env === "production"
+      ? ExtractTextPlugin.extract({
+          // 生产环境：分离、提炼样式文件
+          fallback: {
+            loader: "style-loader"
+          },
+          use: cssLoader
+        })
+      : // 开发环境：页内样式嵌入
+        cssLoader;
+
+  return {
+    entry: { app: "./src/app.js" },
+    output: {
+      // publicPath: env === "development" ? "/" : __dirname + "/../dist/",
+      publicPath: env === "development" ? "/" : "./",
+      path: path.resolve(__dirname, "..", "dist"),
+      filename: "[name]-[hash:5].bundle.js",
+      chunkFilename: "[name]-[hash:5].chunk.js"
+    },
+    module: {
+      rules: [
+        { test: /\.js$/, exclude: /(node_modules)/, use: scriptLoader },
+        // { test: /\.css$/, use: styleLoader },
+        {
+          test:/\.(less|css)$/,
+          use:isDev?[
+            { loader:'style-loader' },
+            { loader:'css-loader' },
+            { loader:'less-loader' },
+            { loader:'postcss-loader' }
+          ]:[
+            MiniCssExtractPlugin.loader,
+            { loader:'css-loader' },
+            { loader:'less-loader' },
+            { loader:'postcss-loader' }
+          ]
+        },
+      ]
+    },
+    plugins: [
+      // 开发环境和生产环境二者均需要的插件
+      new HtmlWebpackPlugin({
+        filename: "index.html",
+        template: path.resolve(__dirname, "..", "index.html"),
+        chunks: ["app"],
+        minify: {
+          collapseWhitespace: true
+        }
+      }),
+      new webpack.ProvidePlugin({ $: "jquery" })
+    ]
+  };
+};
+
+module.exports = env => {
+  let config = env === "production" ? productionConfig : developmentConfig;
+  return merge(generateConfig(env), config);
+};

build/webpack.dev.conf.js

@@ -0,0 +1,29 @@
+const webpack = require("webpack");
+
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  devtool: "source-map",
+  devServer: {
+    contentBase: path.join(__dirname, "../dist/"),
+    port: 8000,
+    hot: true,
+    overlay: true,
+    proxy: {
+      "/comments": {
+        target: "https://m.weibo.cn",
+        changeOrigin: true,
+        logLevel: "debug",
+        headers: {
+          Cookie: ""
+        }
+      }
+    },
+    historyApiFallback: true
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin()
+  ]
+};

build/webpack.prod.conf.js

@@ -0,0 +1,28 @@
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  plugins: [
+    new ExtractTextPlugin({
+      filename: "[name].min.css",
+      allChunks: false // 只包括初始化css, 不包括异步加载的CSS
+    }),
+    new MiniCssExtractPlugin({
+      filename:  '[name].[hash].css' ,
+      chunkFilename: '[id].[hash].css'
+    }),
+    new OptimizeCSSAssetsPlugin({
+      assetNameRegExp: /\.css$/g,
+      cssProcessor: require('cssnano')
+    }),
+    new CleanWebpackPlugin(["dist"], {
+      root: path.resolve(__dirname, "../"),
+      verbose: true
+    })
+  ]
+};

index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title></title>
+  <link rel="shortcut icon" href="https://static.zhinikefu.com/static/images/favicon.ico" type="image/x-icon"/>
+  <link rel="apple-touch-icon" href="https://static.zhinikefu.com/static/images/favicon.ico">
+  <link href="https://static.zhinikefu.com/static/images/favicon.ico" rel="icon">
+  <meta name="description"
+        content="知你客服是一款微信营销SCRM云客服系统，同时管理多个微信个人号、小程序与公众号，帮助企业做好客服与销售工作。解决微信工作场景的各种痛点，实现客户价值最大化"/>
+  <meta name="keywords"
+        content="知你客服,微信营销,微信管家,微信多开,SCRM,私域流量,微信客服系统,微信管理系统,员工微信监管,微信个人号管理"/>
+  <meta name="author" content="知你客服团队">
+  <style>
+    body {
+      font-size: 0.25rem; // 避免初始加载字体过大出现闪屏
+    }
+  </style>
+</head>
+
+<body>
+<div class="content-container">
+</div>
+<div id="toast" class="single-line"><div class="content"></div></div>
+<div id="promot-dialog" style="display: none">
+  <div class="dialog-mask"></div>
+  <div class="dialog-visible">
+    <span class="close-icon link-style">×</span>
+    <div class="dialog-head">温馨提示</div>
+    <div class="dialog-body">
+    </div>
+    <div class="dialog-foot">
+      <span class="default link-style">取消</span>
+      <span class="primary link-style">确定</span>
+    </div>
+  </div>
+</div>
+</body>
+</html>

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "project-start",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "webpack-dev-server --env development --open --config build/webpack.common.conf.js",
+    "build": "webpack --env production --config build/webpack.common.conf.js"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.6.1",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^0.1.19",
+    "css-loader": "^1.0.0",
+    "cssnano": "^4.1.10",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "html-webpack-plugin": "^3.2.0",
+    "jquery": "^3.3.1",
+    "less": "^3.12.2",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.3"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "babel-runtime": "^6.26.0"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead"
+  ]
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    // 我们要用的postcss插件在这儿配置
+    plugins: [
+      // 可以指定兼容程度
+      require('autoprefixer')()
+    ]
+  }

src/app.js

@@ -0,0 +1,37 @@
+import 'babel-polyfill'
+
+import './less/public.less'
+import './less/main.less'
+import './lib/jquery.min.js'
+import { initRPX } from './js/utils/_utils'
+import router from './js/utils/_router'
+
+//
+// /**在development中, 才能正常运行( 通过proxy ) */
+// if (process.env.NODE_ENV === "development") {
+//   $.get(
+//     "/comments/hotflow",
+//     {
+//       id: "4263554020904293",
+//       mid: "4263554020904293",
+//       max_id_type: "0"
+//     },
+//     function(data) {
+//       console.log(data);
+//     }
+//   );
+// } else {
+//   console.log("开发模式下才能测试 '代理功能' ");
+// }
+// /***************************************** */
+
+const initApp = () => {
+  // const openid = utils.getParameterByName('openid');
+  // const phone = utils.getParameterByName('phone');
+  // openid && (localStorage.openidUrl = openid);
+  // phone && (localStorage.phoneUrl = phone);
+  initRPX()
+  router.init()
+  router.startRouter()
+}
+initApp()