[Improvement] upgrade to webpack 4 (#693)

build/webpack.build.js

@@ -1,16 +1,20 @@
+const path = require('path');
 const webpack = require('webpack');
 const config = require('./webpack.config.dev.js');
 const isMinify = process.argv.indexOf('-p') !== -1;
 
 module.exports = Object.assign({}, config, {
+  mode: 'production',
   entry: {
     'vant': './packages/index.js'
   },
   output: {
-    filename: isMinify ? './lib/[name].min.js' : './lib/[name].js',
+    path: path.join(__dirname, '../lib'),
     library: 'vant',
     libraryTarget: 'umd',
-    umdNamedDefine: true
+    filename: isMinify ? '[name].min.js' : '[name].js',
+    umdNamedDefine: true,
+    globalObject: 'this'
   },
   externals: {
     vue: {
@@ -20,10 +24,9 @@ module.exports = Object.assign({}, config, {
       amd: 'vue'
     }
   },
-  plugins: [
+  plugins: [],
-    new webpack.DefinePlugin({
+  performance: false,
-      'process.env.NODE_ENV': '"production"'
+  optimization: {
-    }),
+    minimize: isMinify
-    new webpack.optimize.ModuleConcatenationPlugin()
+  }
-  ]
 });

build/webpack.config.dev.js

@@ -3,16 +3,10 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
-const cache = {
-  loader: 'cache-loader',
-  options: {
-    cacheDirectory: path.resolve(__dirname, '../node_modules/.cache-loader')
-  }
-};
 
 module.exports = {
+  mode: 'development',
   entry: {
     'vant-docs': './docs/src/index.js',
     'vant-mobile': './docs/src/mobile.js'
@@ -20,7 +14,6 @@ module.exports = {
   output: {
     path: path.join(__dirname, '../docs/dist'),
     publicPath: '/',
-    filename: '[name].js',
     chunkFilename: 'async_[name].js'
   },
   devServer: {
@@ -34,21 +27,17 @@ module.exports = {
     stats: 'errors-only'
   },
   resolve: {
-    modules: [path.join(__dirname, '../node_modules'), 'node_modules'],
     extensions: ['.js', '.vue', '.css'],
     alias: {
       vue: 'vue/dist/vue.runtime.esm.js',
-      packages: path.join(__dirname, '../packages'),
+      packages: path.join(__dirname, '../packages')
-      lib: path.join(__dirname, '../lib'),
-      components: path.join(__dirname, '../docs/src/components')
     }
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.vue$/,
         use: [
-          cache,
           {
             loader: 'vue-loader',
             options: {
@@ -61,10 +50,7 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /node_modules|vue-router\/|vue-loader\//,
-        use: [
+        use: 'babel-loader'
-          cache,
-          'babel-loader'
-        ]
       },
       {
         test: /\.css$/,
@@ -78,7 +64,6 @@ module.exports = {
       {
         test: /\.md/,
         use: [
-          cache,
           'vue-loader',
           'fast-vue-md-loader'
         ]
@@ -103,15 +88,9 @@ module.exports = {
       filename: 'examples.html',
       inject: true
     }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: 2,
-      filename: isProduction ? 'vendor.[hash:8].js' : 'vendor.js'
-    }),
     new ExtractTextPlugin({
       filename: isProduction ? '[name].[hash:8].css' : '[name].css',
       allChunks: true
-    }),
+    })
-    new FriendlyErrorsPlugin()
   ]
 };

build/webpack.config.prod.js

@@ -4,19 +4,12 @@ const path = require('path');
 const devConfig = require('./webpack.config.dev.js');
 
 module.exports = merge(devConfig, {
+  mode: 'production',
   output: {
     path: path.join(__dirname, '../docs/dist'),
     publicPath: 'https://img.yzcdn.cn/zanui/vant/',
     filename: '[name].[hash:8].js',
     umdNamedDefine: true,
     chunkFilename: 'async_[name].[chunkhash:8].js'
-  },
+  }
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin()
-  ]
 });

docs/demos/mock/areaEn.js

@@ -0,0 +1,71 @@
+export default {
+  'province_list': {
+    '110000': 'Beijing',
+    '330000': 'Zhejiang',
+    '810000': 'Hong Kong'
+  },
+  'city_list': {
+    '110100': 'Beijing City',
+    '330100': 'Hangzhou',
+    '330200': 'Ningbo',
+    '330300': 'Wenzhou',
+    '330400': 'Jiaxin',
+    '331100': 'Lishui',
+    '810100': 'Hong Kong Island',
+    '810200': 'Kowloon',
+    '810300': 'New Territories'
+  },
+  'county_list': {
+    '110101': 'Dongcheng',
+    '110102': 'Xicheng',
+    '110105': 'Chaoyang',
+    '110106': 'Fengtai',
+    '110108': 'Haidian',
+    '110111': 'Fangshan',
+    '110112': 'Tongzhou',
+    '110113': 'Shunyi',
+    '110114': 'Changping',
+    '110115': 'Daxing',
+    '330105': 'Gongshu',
+    '330106': 'Xihu',
+    '330108': 'Binjiang',
+    '330109': 'Xiaoshan',
+    '330110': 'Yuhang',
+    '330111': 'Fuyang',
+    '330127': 'Chunan',
+    '330182': 'Jiande',
+    '330185': 'Linan',
+    '330206': 'Beilun',
+    '330211': 'Zhenhai',
+    '330225': 'Xiangshan',
+    '330226': 'Ninghai',
+    '330281': 'Yuyao',
+    '330282': 'Cixi',
+    '330327': 'Cangnan',
+    '330328': 'Wencheng',
+    '330329': 'Shuntai',
+    '330381': 'Ruian',
+    '330382': 'Yueqing',
+    '330402': 'Nanhu',
+    '330421': 'Jiashan',
+    '330424': 'Haiyan',
+    '330481': 'Haining',
+    '330482': 'Pinghu',
+    '330483': 'Tongxiang',
+    '331102': 'Liandu District',
+    '331121': 'Qingtian County',
+    '331125': 'Yunhe County',
+    '331181': 'Longquan County',
+    '810101': 'Central',
+    '810102': 'Wan Chai',
+    '810202': 'Mong Kok',
+    '810203': 'Sham Shui Po',
+    '810204': 'Chuk Un',
+    '810205': 'Kwun Tong',
+    '810303': 'Sha Tin',
+    '810305': 'Yuen Long',
+    '810306': 'Tuen Mun',
+    '810307': 'Tsuen Wan',
+    '810309': 'Lantau Island'
+  }
+}

docs/demos/mock/areaEn.json

@@ -1,71 +0,0 @@
-{
-  "province_list": {
-      "110000": "Beijing",
-      "330000": "Zhejiang",
-      "810000": "Hong Kong"
-  },
-  "city_list": {
-      "110100": "Beijing City",
-      "330100": "Hangzhou",
-      "330200": "Ningbo",
-      "330300": "Wenzhou",
-      "330400": "Jiaxin",
-      "331100": "Lishui",
-      "810100": "Hong Kong Island",
-      "810200": "Kowloon",
-      "810300": "New Territories"
-  },
-  "county_list": {
-      "110101": "Dongcheng",
-      "110102": "Xicheng",
-      "110105": "Chaoyang",
-      "110106": "Fengtai",
-      "110108": "Haidian",
-      "110111": "Fangshan",
-      "110112": "Tongzhou",
-      "110113": "Shunyi",
-      "110114": "Changping",
-      "110115": "Daxing",
-      "330105": "Gongshu",
-      "330106": "Xihu",
-      "330108": "Binjiang",
-      "330109": "Xiaoshan",
-      "330110": "Yuhang",
-      "330111": "Fuyang",
-      "330127": "Chunan",
-      "330182": "Jiande",
-      "330185": "Linan",
-      "330206": "Beilun",
-      "330211": "Zhenhai",
-      "330225": "Xiangshan",
-      "330226": "Ninghai",
-      "330281": "Yuyao",
-      "330282": "Cixi",
-      "330327": "Cangnan",
-      "330328": "Wencheng",
-      "330329": "Shuntai",
-      "330381": "Ruian",
-      "330382": "Yueqing",
-      "330402": "Nanhu",
-      "330421": "Jiashan",
-      "330424": "Haiyan",
-      "330481": "Haining",
-      "330482": "Pinghu",
-      "330483": "Tongxiang",
-      "331102": "Liandu District",
-      "331121": "Qingtian County",
-      "331125": "Yunhe County",
-      "331181": "Longquan County",
-      "810101": "Central",
-      "810102": "Wan Chai",
-      "810202": "Mong Kok",
-      "810203": "Sham Shui Po",
-      "810204": "Chuk Un",
-      "810205": "Kwun Tong",
-      "810303": "Sha Tin",
-      "810305": "Yuen Long",
-      "810306": "Tuen Mun",
-      "810307": "Tsuen Wan",
-      "810309": "Lantau Island"
-  }
-}

docs/demos/views/address-edit.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import areaList from '../mock/area.json';
+import areaList from '../mock/area';
 
 export default {
   i18n: {

docs/demos/views/area.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script>
-import AreaList from '../mock/area.json';
+import AreaList from '../mock/area';
-import AreaListEn from '../mock/areaEn.json';
+import AreaListEn from '../mock/areaEn';
 
 export default {
   i18n: {

docs/markdown/en-US/area.md

@@ -86,7 +86,7 @@ Example of `AreaList`
 }
 ```
 
-All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
+All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.js)
 
 #### argument of callback function confirm
 An array contains selected area objects.

docs/markdown/zh-CN/area.md

@@ -90,7 +90,7 @@ Vue.use(Area);
 }
 ```
 
-完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
+完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.js)
 
 #### 点击完成时返回的数据格式
 

package.json

@@ -18,11 +18,11 @@
     "build:components": "node build/bin/build-components.js --color",
     "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color",
     "build:vant": "cross-env NODE_ENV=production webpack --progress --hide-modules --color --config build/webpack.build.js && cross-env NODE_ENV=production webpack -p --progress --hide-modules --color --config build/webpack.build.js",
-    "build:style-entry": "cross-env VUE_ENV=server node build/bin/build-style-entry.js",
+    "build:style-entry": "node build/bin/build-style-entry.js",
     "build:changelog": "sh build/bin/build-changelog.sh",
     "deploy": "npm run deploy:docs && npm run deploy:cdn && gh-pages -d docs/dist --remote youzan && rimraf docs/dist",
     "deploy:cdn": "superman cdn /zanui/vant docs/dist/*.js docs/dist/*.css && superman cdn /zanui/vant/async_en-US docs/dist/async_en-US/*.js && superman cdn /zanui/vant/async_zh-CN docs/dist/async_zh-CN/*.js",
-    "deploy:docs": "rimraf docs/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.prod.js",
+    "deploy:docs": "rimraf docs/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.prod.js",
     "dist": "npm run bootstrap && node build/bin/build-lib.js",
     "lint": "./node_modules/.bin/eslint ./packages --ext .js,.vue",
     "test": "karma start test/karma.conf.js --single-run",
@@ -59,29 +59,27 @@
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
-    "cache-loader": "^1.2.2",
     "chai": "^4.1.2",
     "codecov": "^3.0.0",
-    "cross-env": "^5.1.3",
+    "cross-env": "^5.1.4",
     "css-loader": "^0.28.10",
     "dependency-tree": "^6.0.1",
     "eslint": "^4.18.2",
     "eslint-plugin-vue": "^4.3.0",
-    "extract-text-webpack-plugin": "3.0.2",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fast-vue-md-loader": "^1.0.3",
-    "friendly-errors-webpack-plugin": "^1.6.1",
     "gh-pages": "^1.0.0",
-    "html-webpack-plugin": "^3.0.6",
+    "html-webpack-plugin": "3.0.6",
     "isparta-loader": "^2.0.0",
-    "karma": "^1.7.1",
+    "karma": "^2.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sinon-chai": "^1.3.2",
     "karma-spec-reporter": "^0.0.32",
-    "karma-webpack": "^2.0.9",
+    "karma-webpack": "^2.0.13",
-    "mocha": "^4.0.1",
+    "mocha": "^5.0.4",
     "postcss": "^6.0.19",
     "postcss-calc": "^6.0.0",
     "postcss-easy-import": "^3.0.0",
@@ -96,15 +94,16 @@
     "uppercamelcase": "^3.0.0",
     "url-loader": "^1.0.1",
     "vant-doc": "1.0.4",
-    "vue": "^2.5.15",
+    "vue": "^2.5.16",
     "vue-loader": "^14.2.1",
     "vue-router": "^3.0.1",
     "vue-sfc-compiler": "^0.0.8",
     "vue-style-loader": "^4.0.2",
-    "vue-template-compiler": "^2.5.15",
+    "vue-template-compiler": "^2.5.16",
     "vue-template-es2015-compiler": "^1.6.0",
-    "webpack": "^3.11.0",
+    "webpack": "^4.1.1",
-    "webpack-dev-server": "2.11.1",
+    "webpack-cli": "^2.0.12",
+    "webpack-dev-server": "3.1.1",
     "webpack-merge": "^4.1.2"
   }
 }

test/get-webpack-conf.js

@@ -4,6 +4,7 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
 function getWebpackConfig(testFileName) {
   return {
+    mode: 'development',
     output: {
       path: path.resolve(process.cwd(), 'dist'),
       publicPath: '/dist/',
@@ -18,7 +19,7 @@ function getWebpackConfig(testFileName) {
         options: {
           babel: {
             presets: ['env'],
-            plugins: ['transform-runtime']
+            plugins: ['transform-runtime', 'transform-object-rest-spread']
           },
           vue: {
             autoprefixer: false,
@@ -35,7 +36,7 @@ function getWebpackConfig(testFileName) {
     stats: 'errors-only',
     resolve: {
       modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules'],
-      extensions: ['.js', '.json', '.vue', '.css'],
+      extensions: ['.js', '.vue', '.css'],
       alias: {
         src: path.resolve(process.cwd(), 'src'),
         packages: path.resolve(process.cwd(), 'packages'),
@@ -48,12 +49,12 @@ function getWebpackConfig(testFileName) {
           enforce: 'pre',
           test: /\.js$/,
           exclude: /node_modules|vue-router\/|vue-loader\/|docs|test|src\/index|src\/utils|src\/mixins|packages\/swipe/,
-          use: ['isparta-loader']
+          use: 'isparta-loader'
         },
         {
           test: /\.js$/,
           exclude: /node_modules|vue-router\/|vue-loader\//,
-          use: ['babel-loader']
+          use: 'babel-loader'
         },
         {
           test: /\.(css|pcss)$/,
@@ -111,8 +112,7 @@ function getWebpackConfig(testFileName) {
           ]
         }
       ]
-    },
+    }
-    devtool: '#inline-source-map'
   };
 }
 

test/specs/address-edit.spec.js

@@ -1,7 +1,7 @@
 import { mount } from 'avoriaz';
 import AddressEdit from 'packages/address-edit';
 import AddressDetail from 'packages/address-edit/Detail';
-import areaList from '../../docs/demos/mock/area.json';
+import areaList from '../../docs/demos/mock/area';
 
 describe('AddressEdit', () => {
   let wrapper;

test/specs/area.spec.js

@@ -1,6 +1,6 @@
 import Area from 'packages/area';
 import { mount } from 'avoriaz';
-import areaList from '../../docs/demos/mock/area.json';
+import areaList from '../../docs/demos/mock/area';
 
 describe('Area', () => {
   let wrapper;

test/specs/utils.spec.js

@@ -49,7 +49,7 @@ describe('Utils', () => {
     raf(spy);
 
     setTimeout(() => {
-      expect(spy.calledOnce).to.be.true;
+      expect(spy.called).to.be.true;
       cancel(1);
       done();
     }, 50);

types/index.d.ts

@@ -22,6 +22,8 @@ export class CellSwipe extends VanComponent {}
 export class Checkbox extends VanComponent {}
 export class CheckboxGroup extends VanComponent {}
 export class Col extends VanComponent {}
+export class Collapse extends VanComponent {}
+export class CollapseItem extends VanComponent {}
 export class ContactCard extends VanComponent {}
 export class ContactEdit extends VanComponent {}
 export class ContactList extends VanComponent {}
@@ -33,6 +35,7 @@ export class GoodsAction extends VanComponent {}
 export class GoodsActionBigBtn extends VanComponent {}
 export class GoodsActionMiniBtn extends VanComponent {}
 export class Icon extends VanComponent {}
+export class List extends VanComponent {}
 export class Loading extends VanComponent {}
 export class NavBar extends VanComponent {}
 export class NoticeBar extends VanComponent {}