Chore: convert build system to webpack (#11216)

* Chore: convert build system to webpack

* Update webpack.demo.js

* Chore: remove cooking and upgrade dependencies to adapt webpack@3

build/cooking.common.js

-var cooking = require('cooking');
-var config = require('./config');
-
-cooking.set({
-  entry: './src/index.js',
-  dist: './lib',
-  clean: false,
-  format: 'cjs',
-  extends: ['vue2'],
-  minimize: false,
-  alias: config.alias,
-  externals: config.externals
-});
-
-cooking.add('output.filename', 'element-ui.common.js');
-cooking.add('loader.js.exclude', config.jsexclude);
-cooking.add('loader.scss', {
-  test: /\.scss$/,
-  loaders: ['style-loader', 'css-loader', 'sass-loader']
-});
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();

build/cooking.component.js

-var cooking = require('cooking');
-var Components = require('../components.json');
-var config = require('./config');
-
-cooking.set({
-  entry: Components,
-  dist: './lib',
-  clean: false,
-  format: 'cjs',
-  extends: ['vue2'],
-  minimize: false,
-  externals: config.externals,
-  alias: config.alias
-});
-
-cooking.add('output.filename', '[name].js');
-cooking.add('loader.js.exclude', config.jsexclude);
-cooking.add('loader.scss', {
-  test: /\.scss$/,
-  loaders: ['style-loader', 'css-loader', 'sass-loader']
-});
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();

build/cooking.conf.js

-var cooking = require('cooking');
-var config = require('./config');
-
-cooking.set({
-  entry: './src/index.js',
-  dist: './lib',
-  clean: false,
-  format: 'umd',
-  moduleName: 'ELEMENT',
-  extends: ['vue2'],
-  alias: config.alias,
-  externals: { vue: config.vue }
-});
-
-cooking.add('output.filename', 'index.js');
-cooking.add('loader.js.exclude', config.jsexclude);
-cooking.add('loader.scss', {
-  test: /\.scss$/,
-  loaders: ['style-loader', 'css-loader', 'sass-loader']
-});
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();

build/cooking.demo.js

-var cooking = require('cooking');
-var config = require('./config');
-var md = require('markdown-it')();
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var striptags = require('./strip-tags');
-var slugify = require('transliteration').slugify;
-var isProd = process.env.NODE_ENV === 'production';
-var isPlay = !!process.env.PLAY_ENV;
-
-function convert(str) {
-  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
-    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
-  });
-  return str;
-}
-
-cooking.set({
-  entry: isProd ? {
-    docs: './examples/entry.js',
-    'element-ui': './src/index.js'
-  } : (isPlay ? './examples/play.js' : './examples/entry.js'),
-  dist: './examples/element-ui/',
-  template: [
-    {
-      template: './examples/index.tpl',
-      filename: './index.html',
-      favicon: './examples/favicon.ico'
-    }
-  ],
-  publicPath: process.env.CI_ENV || '',
-  hash: true,
-  devServer: {
-    hostname: '0.0.0.0',
-    port: 8085,
-    log: false,
-    publicPath: '/'
-  },
-  minimize: true,
-  chunk: isProd ? {
-    'common': { name: ['element-ui', 'manifest'] }
-  } : false,
-  extractCSS: true,
-  alias: config.alias,
-  extends: ['vue2', 'lint'],
-  postcss: config.postcss
-});
-
-// fix publicPath
-if (!process.env.CI_ENV) {
-  cooking.add('output.publicPath', '');
-}
-
-cooking.add('loader.md', {
-  test: /\.md$/,
-  loader: 'vue-markdown-loader'
-});
-
-cooking.add('loader.scss', {
-  test: /\.scss$/,
-  loaders: ['style-loader', 'css-loader', 'sass-loader']
-});
-
-cooking.add(
-  'output.chunkFilename',
-  isProd ? '[name].[chunkhash:7].js' : '[name].js'
-);
-
-cooking.add('vueMarkdown', {
-  use: [
-    [require('markdown-it-anchor'), {
-      level: 2,
-      slugify: slugify,
-      permalink: true,
-      permalinkBefore: true
-    }],
-    [require('markdown-it-container'), 'demo', {
-      validate: function(params) {
-        return params.trim().match(/^demo\s*(.*)$/);
-      },
-
-      render: function(tokens, idx) {
-        var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-        if (tokens[idx].nesting === 1) {
-          var description = (m && m.length > 1) ? m[1] : '';
-          var content = tokens[idx + 1].content;
-          var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
-          var script = striptags.fetch(content, 'script');
-          var style = striptags.fetch(content, 'style');
-          var jsfiddle = { html: html, script: script, style: style };
-          var descriptionHTML = description
-            ? md.render(description)
-            : '';
-
-          jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
-
-          return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
-                    <div class="source" slot="source">${html}</div>
-                    ${descriptionHTML}
-                    <div class="highlight" slot="highlight">`;
-        }
-        return '</div></demo-block>\n';
-      }
-    }],
-    [require('markdown-it-container'), 'tip'],
-    [require('markdown-it-container'), 'warning']
-  ],
-  preprocess: function(MarkdownIt, source) {
-    MarkdownIt.renderer.rules.table_open = function() {
-      return '<table class="table">';
-    };
-    MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
-    return source;
-  }
-});
-
-var wrap = function(render) {
-  return function() {
-    return render.apply(this, arguments)
-      .replace('<code v-pre class="', '<code class="hljs ')
-      .replace('<code>', '<code class="hljs">');
-  };
-};
-
-if (isProd) {
-  cooking.add('externals.vue', 'Vue');
-  cooking.add('externals.vue-router', 'VueRouter');
-}
-
-cooking.add('plugin.CopyWebpackPlugin', new CopyWebpackPlugin([
-  { from: 'examples/versions.json' }
-]));
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();

build/cooking.test.js

-var cooking = require('cooking');
-var config = require('./config');
-var ProgressBarPlugin = require('progress-bar-webpack-plugin');
-var jsLoader = process.env.CI_ENV ? 'isparta-loader' : 'isparta-loader!eslint-loader';
-
-cooking.set({
-  entry: './src/index.js',
-  extends: process.env.CI_ENV ? ['vue2'] : ['vue2', 'lint'],
-  minimize: false,
-  alias: Object.assign(config.alias, {
-    'vue$': 'vue/dist/vue.common.js'
-  }),
-  sourceMap: '#inline-source-map'
-});
-
-cooking.add('vue.loaders.js', jsLoader);
-cooking.add('loader.js.exclude', config.jsexclude);
-cooking.add('preLoader.0', {
-  test: /\.js$/,
-  loader: 'isparta',
-  exclude: config.jsexclude,
-  include: /src|packages/
-});
-
-if (!process.env.CI_ENV) {
-  cooking.add('plugins.process', new ProgressBarPlugin());
-}
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();

build/deploy-ci.sh

@@ -56,7 +56,7 @@ if [ "$TRAVIS_TAG" ]; then
 fi
 
 # build dev site
-npm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/cooking build -c build/cooking.demo.js
+npm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/webpack --config build/webpack.demo.js
 cd temp_web
 git clone https://$ROT_TOKEN@github.com/ElementUI/dev.git && cd dev
 mkdir $TRAVIS_BRANCH

build/webpack.common.js

+const path = require('path');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+const config = require('./config');
+
+module.exports = {
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: 'element-ui.common.js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  externals: config.externals,
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preserveWhitespace: false
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]
+};

build/webpack.component.js

+const path = require('path');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+var Components = require('../components.json');
+const config = require('./config');
+
+const webpackConfig = {
+  entry: Components,
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  externals: config.externals,
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preserveWhitespace: false
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]
+};
+
+module.exports = webpackConfig;

build/webpack.conf.js

+const path = require('path');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+const config = require('./config');
+
+module.exports = {
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: 'index.js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'umd',
+    library: 'ELEMENT',
+    umdNamedDefine: true
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias
+  },
+  externals: {
+    vue: config.vue
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preserveWhitespace: false
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      },
+      sourceMap: false
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]
+};

build/webpack.demo.js

+const path = require('path');
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const md = require('markdown-it')();
+const slugify = require('transliteration').slugify;
+
+const striptags = require('./strip-tags');
+const config = require('./config');
+
+const isProd = process.env.NODE_ENV === 'production';
+const isDev = process.env.NODE_ENV === 'development';
+const isPlay = !!process.env.PLAY_ENV;
+
+function convert(str) {
+  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
+    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
+  });
+  return str;
+}
+
+function wrap(render) {
+  return function() {
+    return render.apply(this, arguments)
+      .replace('<code v-pre class="', '<code class="hljs ')
+      .replace('<code>', '<code class="hljs">');
+  };
+}
+
+const webpackConfig = {
+  entry: isProd ? {
+    docs: './examples/entry.js',
+    'element-ui': './src/index.js'
+  } : (isPlay ? './examples/play.js' : './examples/entry.js'),
+  output: {
+    path: path.resolve(process.cwd(), './examples/element-ui/'),
+    publicPath: process.env.CI_ENV || '',
+    filename: '[name].[hash:7].js',
+    chunkFilename: isProd ? '[name].[hash:7].js' : '[name].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  devServer: {
+    host: '0.0.0.0',
+    port: 8085,
+    publicPath: '/',
+    noInfo: true
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.jsx?$/,
+        exclude: /node_modules|bower_components/,
+        loader: 'eslint-loader'
+      },
+      {
+        enforce: 'pre',
+        test: /\.vue$/,
+        exclude: /node_modules|bower_components/,
+        loader: 'eslint-loader'
+      },
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.md$/,
+        loader: 'vue-markdown-loader',
+        options: {
+          use: [
+            [require('markdown-it-anchor'), {
+              level: 2,
+              slugify: slugify,
+              permalink: true,
+              permalinkBefore: true
+            }],
+            [require('markdown-it-container'), 'demo', {
+              validate: function(params) {
+                return params.trim().match(/^demo\s*(.*)$/);
+              },
+
+              render: function(tokens, idx) {
+                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+                if (tokens[idx].nesting === 1) {
+                  var description = (m && m.length > 1) ? m[1] : '';
+                  var content = tokens[idx + 1].content;
+                  var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
+                  var script = striptags.fetch(content, 'script');
+                  var style = striptags.fetch(content, 'style');
+                  var jsfiddle = { html: html, script: script, style: style };
+                  var descriptionHTML = description
+                    ? md.render(description)
+                    : '';
+
+                  jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
+
+                  return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
+                            <div class="source" slot="source">${html}</div>
+                            ${descriptionHTML}
+                            <div class="highlight" slot="highlight">`;
+                }
+                return '</div></demo-block>\n';
+              }
+            }],
+            [require('markdown-it-container'), 'tip'],
+            [require('markdown-it-container'), 'warning']
+          ],
+          preprocess: function(MarkdownIt, source) {
+            MarkdownIt.renderer.rules.table_open = function() {
+              return '<table class="table">';
+            };
+            MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
+            return source;
+          }
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './examples/index.tpl',
+      filename: './index.html',
+      favicon: './examples/favicon.ico'
+    }),
+    new CopyWebpackPlugin([
+      { from: 'examples/versions.json' }
+    ]),
+    new ProgressBarPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      vue: {
+        preserveWhitespace: false
+      }
+    })
+  ]
+};
+
+if (isProd) {
+  webpackConfig.externals = {
+    vue: 'Vue',
+    'vue-router': 'VueRouter'
+  };
+  webpackConfig.module.rules.push(
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        extractCSS: true,
+        preserveWhitespace: false
+      }
+    },
+    {
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+          'postcss-loader'
+        ]
+      })
+    }
+  );
+  webpackConfig.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      },
+      sourceMap: false
+    }),
+    new ExtractTextPlugin({
+      filename: '[name].[contenthash:7].css'
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['element-ui', 'manifest']
+    })
+  );
+}
+if (isDev) {
+  webpackConfig.module.rules.push(
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        preserveWhitespace: false
+      }
+    },
+    {
+      test: /\.css$/,
+      loaders: ['style-loader', 'css-loader', 'postcss-loader']
+    }
+  );
+  webpackConfig.plugins.push(
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    })
+  );
+}
+
+module.exports = webpackConfig;

build/webpack.test.js

+const path = require('path');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+const config = require('./config');
+
+const webpackConfig = {
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './dist'),
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[id].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: Object.assign(config.alias, {
+      'vue$': 'vue/dist/vue.common.js'
+    }),
+    modules: ['node_modules']
+  },
+  devtool: '#inline-source-map',
+  module: {
+    rules: [
+      {
+        enforce: 'post',
+        test: /\.jsx?$/,
+        loader: 'isparta-loader',
+        options: { esModules: true },
+        exclude: config.jsexclude,
+        include: /src|packages/
+      },
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            js: process.env.CI_ENV ? 'isparta-loader' : 'isparta-loader!eslint-loader'
+          },
+          preserveWhitespace: false
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+  ]
+};
+
+if (!process.env.CI_ENV) {
+  webpackConfig.plugins.push(
+    new ProgressBarPlugin()
+  );
+}
+
+module.exports = webpackConfig;

package.json

@@ -18,10 +18,10 @@
     "build:umd": "node build/bin/build-locale.js",
     "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes",
     "deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
-    "deploy:build": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME",
-    "dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p & node build/bin/template.js",
-    "dev:play": "npm run build:file && cross-env PLAY_ENV=true cooking watch -c build/cooking.demo.js -p",
-    "dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:umd && npm run build:theme",
+    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
+    "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
+    "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
+    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
     "dist:all": "node build/bin/build-all.js && npm run build:theme",
     "i18n": "node build/bin/i18n.js",
     "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
@@ -65,7 +65,7 @@
     "algoliasearch": "^3.24.5",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.14.0",
-    "babel-loader": "^6.2.5",
+    "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-module-resolver": "^2.2.0",
     "babel-plugin-syntax-jsx": "^6.8.0",
@@ -74,9 +74,6 @@
     "chai": "^3.5.0",
     "cheerio": "^0.18.0",
     "chokidar": "^1.7.0",
-    "cooking": "^1.5.4",
-    "cooking-lint": "0.1.3",
-    "cooking-vue2": "^0.3.3",
     "copy-webpack-plugin": "^4.1.1",
     "coveralls": "^2.11.14",
     "cp-cli": "^1.0.2",
@@ -111,7 +108,7 @@
     "karma-sinon-chai": "^1.2.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^1.8.0",
+    "karma-webpack": "^3.0.0",
     "lerna": "^2.0.0-beta.32",
     "lolex": "^1.5.1",
     "markdown-it": "^6.1.1",
@@ -123,6 +120,7 @@
     "postcss": "^5.1.2",
     "postcss-loader": "0.11.1",
     "postcss-salad": "^1.0.8",
+    "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
     "sass-loader": "^6.0.6",
     "sinon": "^1.17.6",

postcss.config.js

+module.exports = {
+  plugins: {
+    'postcss-salad': {
+      browsers: ['ie > 8', 'last 2 versions'],
+      features: {
+        bem: {
+          shortcuts: {
+            component: 'b',
+            modifier: 'm',
+            descendent: 'e'
+          },
+          separators: {
+            descendent: '__',
+            modifier: '--'
+          }
+        }
+      }
+    }
+  }
+};

test/unit/karma.conf.js

-var webpackConfig = require('../../build/cooking.test');
+var webpackConfig = require('../../build/webpack.test');
 
 // no need for app entry during tests
 // delete webpackConfig.entry;