Merge branch 'feature/webpack2' into release/5.5.1

ccbikai(👎🏻🍜)
Commit af5aa0c13feb359a26eea3ae6dbc43f057194201 2 parents 2f43a329 ff53d40b
Showing 6 changed files with 91 additions and 48 deletions
.gitignore
package.json
public/build/postcss.config.js
public/build/webpack.base.config.js
public/build/webpack.dev.config.js
public/build/webpack.prod.config.js
--- a/.gitignore
View file @af5aa0c
+++ b/.gitignore
View file @af5aa0c
@@ -151,3 +151,4 @@ public/bundle/*
 nbproject/*
 .DS_Store
 .devhost
+.happypack/*
--- a/package.json
View file @af5aa0c
+++ b/package.json
View file @af5aa0c
@@ -15,8 +15,8 @@
     "debug": "DEBUG=\"express:*\" nodemon -e js,hbs -i public/ app.js",
     "lint-js": "eslint -c .eslintrc --cache .",
     "lint-css": "stylelint --syntax scss --config .stylelintrc 'public/scss/**/*.css'",
-    "lint-vue-js": "eslint -c .eslintrc --cache public/vue/**/*.vue",
-    "lint-vue-css": "stylelint --syntax scss --extract --config .stylelintrc public/vue/**/*.vue",
+    "lint-vue-js": "eslint -c .eslintrc --cache public/vue",
+    "lint-vue-css": "stylelint --syntax scss --extract --config .stylelintrc 'public/scss/**/*.vue'",
     "precommit": "node lint.js"
   },
   "license": "MIT",
@@ -63,9 +63,11 @@
     "cssnano": "^3.10.0",
     "eslint": "^3.16.0",
     "eslint-config-yoho": "^1.0.1",
+    "eslint-loader": "^1.6.3",
     "eslint-plugin-html": "^2.0.1",
     "extract-text-webpack-plugin": "^2.1.0",
     "handlebars-loader": "^1.4.0",
+    "happypack": "^3.0.3",
     "husky": "^0.13.1",
     "nodemon": "^1.11.0",
     "postcss-assets": "^4.0.1",
@@ -87,6 +89,7 @@
     "stylelint": "^7.9.0",
     "stylelint-config-yoho": "^1.2.8",
     "stylelint-processor-html": "^1.0.0",
+    "stylelint-webpack-plugin": "^0.7.0",
     "vue": "^2.1.10",
     "vue-loader": "^11.1.4",
     "vue-template-compiler": "^2.1.10",
--- a/public/build/postcss.config.js
View file @af5aa0c
+++ b/public/build/postcss.config.js
View file @af5aa0c
@@ -2,16 +2,25 @@
 /**
  * postcss plugins for both dev and pro
- * @parem et Symbol
  */
-const psprites = require('postcss-sprites');
+
 const path = require('path');
+const precss = require('precss');
+const cssnano = require('cssnano');
+const autoprefixer = require('autoprefixer');
+const postSprites = require('postcss-sprites');
+const postImport = require('postcss-import');
+const postAssets = require('postcss-assets');
+const postCalc = require('postcss-calc');
+const postPxtorem = require('postcss-pxtorem');
+const postUse = require('postcss-use');
+const spritescore = require('postcss-sprites/lib/core');
 const config = require('../../package.json');
 const distDir = path.join(__dirname, `../dist/${config.name}/${config.version}`);
 const dist = {
     img: distDir + '/img',
     font: distDir + '/font'
-}
+};
 exports.postcssPlugin = (et) => {
     let sprites = {
@@ -19,7 +28,7 @@ exports.postcssPlugin = (et) => {
                 padding: 8
             },
             filterBy(file) {
-            // base64 的图片没有 url 过滤掉
+                // base64 的图片没有 url 过滤掉
                 if (file.url) {
                     return Promise.resolve();
                 }
@@ -38,9 +47,9 @@ exports.postcssPlugin = (et) => {
                 return group ? Promise.resolve(group) : Promise.reject('yoho');
             },
             hooks: {
-                onUpdateRule:function(rule, comment, image){
-                    image.spriteUrl += ("?t=" + new Date().getTime());
-                    require('postcss-sprites/lib/core').updateRule(rule, comment, image);
+                onUpdateRule: function(rule, comment, image) {
+                    image.spriteUrl += ('?t=' + new Date().getTime());
+                    spritescore.updateRule(rule, comment, image);
                 }
             }
         },
@@ -74,7 +83,7 @@ exports.postcssPlugin = (et) => {
     }
     plugins = [
-        require('postcss-import')({
+        postImport({
             path: [path.join(__dirname, '../scss')],
             resolve(id) {
                 let name = path.basename(id);
@@ -85,29 +94,27 @@ exports.postcssPlugin = (et) => {
                 return id;
             }
         }),
-        require('precss'),
-        (psprites.default || psprites)(sprites),
-        require('postcss-assets')(assets),
-        require('postcss-calc'),
-        require('postcss-pxtorem')({
+        precss(),
+        postSprites(sprites),
+        postAssets(assets),
+        postCalc(),
+        postPxtorem({
             rootValue: 40,
             unitPrecision: 5, // 保留5位小数字
             minPixelValue: 2, // 小于 2 时，不转换
             selectorBlackList: [], // 选择器黑名单，可以使用正则
             propWhiteList: [] // 属性名称为空，表示替换所有属性的值
         }),
-        require('autoprefixer')({
+        autoprefixer({
             browsers: ['> 1%']
         }),
-
-        // 可选
-        require('postcss-use')({
+        postUse({
             modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
         })
     ];
     if (et === 'pro') {
-        plugins.push(require('cssnano')({
+        plugins.push(cssnano({
             safe: true
         }));
     }
--- a/public/build/webpack.base.config.js
View file @af5aa0c
+++ b/public/build/webpack.base.config.js
View file @af5aa0c
@@ -5,20 +5,23 @@
  */
 'use strict';
-
-const webpack = require('webpack');
-const path = require('path');
 const _ = require('lodash');
+const os = require('os');
+const path = require('path');
+const scss = require('postcss-scss');
 const shelljs = require('shelljs');
+const webpack = require('webpack');
+const HappyPack = require('happypack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const postcssConfig = require('./postcss.config.js');
-const scss = require('postcss-scss');
-
 const entries = {
-    'index': path.join(__dirname, '../scss/index.css'),
-    'common': path.join(__dirname, '../scss/common.css'),
-    'feature': path.join(__dirname, '../scss/feature.css')
+    index: path.join(__dirname, '../scss/index.css'),
+    common: path.join(__dirname, '../scss/common.css'),
+    feature: path.join(__dirname, '../scss/feature.css')
 };
+const happyThreadPool = HappyPack.ThreadPool({ // eslint-disable-line
+    size: os.cpus().length
+});
 // 构建各模块子页面JS。生成规则module.page.js
 shelljs.ls(path.join(__dirname, '../js/**/*.page.js')).forEach((f) => {
@@ -67,7 +70,7 @@ module.exports = (env) => {
                 test: /\.js$/,
                 exclude: [/node_modules/],
                 use: [{
-                    loader: 'babel-loader'
+                    loader: 'happypack/loader?id=js'
                 }]
             }, {
                 test: /\.css$/,
@@ -89,22 +92,19 @@ module.exports = (env) => {
             }, {
                 test: /\.hbs$/,
                 use: [{
-                    loader: 'handlebars-loader',
-                    options: {
-                        helperDirs: [
-                            path.join(__dirname, '../js/common/helpers')
-                        ],
-                        partialDirs: [
-                            path.join(__dirname, '../../doraemon/views/partial')
-                        ]
-                    }
+                    loader: 'happypack/loader?id=hbs',
                 }]
             }]
         },
         resolve: {
-            modules: ['node_modules', './public/vue', './public/hbs', './public/scss', './public/js'],
+            modules: [
+                path.join(__dirname, '../../node_modules'),
+                path.join(__dirname, '../vue'),
+                path.join(__dirname, '../hbs'),
+                path.join(__dirname, '../scss'),
+                path.join(__dirname, '../js')
+            ],
             alias: {
-                js: path.join(__dirname, '../js/'),
                 vue: 'vue/dist/vue.js'
             }
         },
@@ -112,6 +112,26 @@ module.exports = (env) => {
             children: false
         },
         plugins: [
+            new HappyPack({
+                id: 'js',
+                threadPool: happyThreadPool,
+                loaders: ['babel-loader'],
+            }),
+            new HappyPack({
+                id: 'hbs',
+                threadPool: happyThreadPool,
+                loaders: [{
+                    loader: 'handlebars-loader',
+                    options: {
+                        helperDirs: [
+                            path.join(__dirname, '../js/common/helpers')
+                        ],
+                        partialDirs: [
+                            path.join(__dirname, '../../doraemon/views/partial')
+                        ]
+                    }
+                }]
+            }),
             new ExtractTextPlugin('[name].css'),
             new webpack.optimize.CommonsChunkPlugin({
                 name: 'libs',
@@ -123,5 +143,5 @@ module.exports = (env) => {
                 'window.jQuery': 'yoho-jquery'
             })
         ]
-    }
+    };
 };
--- a/public/build/webpack.dev.config.js
View file @af5aa0c
+++ b/public/build/webpack.dev.config.js
View file @af5aa0c
@@ -2,20 +2,29 @@
 const path = require('path');
 const webpack = require('webpack');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
 let baseConfig = require('./webpack.base.config.js');
 baseConfig = baseConfig('dev');
-baseConfig.devtool = '#eval';
+baseConfig.devtool = '#inline-source-map';
 baseConfig.output.publicPath = 'http://localhost:5001/';
+baseConfig.module.rules.push({
+    enforce: 'pre',
+    test: /(\.js|\.vue)$/,
+    exclude: /node_modules/,
+    loader: 'eslint-loader',
+    options: {
+        cache: true,
+        formatter: require('eslint/lib/formatters/codeframe')
+    }
+});
 baseConfig.devServer = {
-	host: '0.0.0.0',
+    host: '0.0.0.0',
     port: 5001,
     contentBase: [path.join(__dirname, './bundle/'), path.join(__dirname, '../')],
     publicPath: baseConfig.output.publicPath,
     hot: true,
     inline: true,
-    // quiet: true,
-    // clientLogLevel: 'error',
     compress: true,
     stats: {
         colors: true,
@@ -24,9 +33,12 @@ baseConfig.devServer = {
     headers: {
         'Access-Control-Allow-Origin': '*'
     }
-}
+};
 baseConfig.plugins.push(
+    new StyleLintPlugin({
+        files: ['public/scss/**/*.css', 'public/vue/**/*.vue'],
+    }),
     new webpack.HotModuleReplacementPlugin()
 );
--- a/public/build/webpack.prod.config.js
View file @af5aa0c
+++ b/public/build/webpack.prod.config.js
View file @af5aa0c
@@ -11,8 +11,8 @@ let baseConfig = require('./webpack.base.config.js');
 // cope img font
 shelljs.mkdir('-p', distDir);
-shelljs.cp('-R', path.join(__dirname,'../img/'), distDir);
-shelljs.cp('-R', path.join(__dirname,'../font/'), distDir);
+shelljs.cp('-R', path.join(__dirname, '../img/'), distDir);
+shelljs.cp('-R', path.join(__dirname, '../font/'), distDir);
 baseConfig = baseConfig('pro');
 baseConfig.output.path = distDir;