build: refactor webpack configs

src/index.js

@@ -0,0 +1 @@
+window.DPlayer = require('./DPlayer');

webpack.config.js

@@ -1,91 +0,0 @@
-var webpack = require('webpack');
-var path = require('path');
-var autoprefixer = require('autoprefixer');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-
-var libraryName = 'DPlayer';
-var env = process.env.WEBPACK_ENV;
-var ROOT_PATH = path.resolve(__dirname);
-var APP_PATH = path.resolve(ROOT_PATH, 'src');
-var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
-
-var dev = env === 'dev';
-var plugins = [].concat(dev ? [] : [
-    new webpack.optimize.UglifyJsPlugin({
-        sourceMap: true,
-        compressor: {
-            warnings: false,
-            conditionals: true,
-            unused: true,
-            comparisons: true,
-            sequences: true,
-            dead_code: true,
-            evaluate: true,
-            if_return: true,
-            join_vars: true,
-            negate_iife: false
-        },
-        output: {
-            comments: false
-        }
-    }),
-    new ExtractTextPlugin(`${libraryName}.min.css`)
-]);
-
-module.exports = {
-    entry: './src/' + libraryName + '.js',
-
-    output: {
-        path: BUILD_PATH,
-        filename: libraryName + '.min.js',
-        library: libraryName,
-        libraryTarget: 'umd',
-        umdNamedDefine: true
-    },
-
-    devtool: dev ? 'eval-source-map' : 'source-map',
-
-    devServer: {
-        publicPath: "/dist/",
-    },
-
-    module: {
-        rules: [
-            {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'eslint-loader',
-                include: APP_PATH,
-                options: {
-                    configFile: './.eslintrc'
-                },
-            },
-            {
-                test: /\.js$/,
-                loader: 'template-string-optimize-loader',
-                include: APP_PATH,
-            },
-            {
-                test: /\.js$/,
-                loader: 'babel-loader',
-                include: APP_PATH,
-                options: {
-                    presets: ['es2015']
-                }
-            },
-            {
-                test: /\.scss$/,
-                use: dev ? ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] : ExtractTextPlugin.extract({
-                    use: ['css-loader?minimize&-autoprefixer', 'postcss-loader', 'sass-loader']
-                }),
-                include: APP_PATH
-            },
-            {
-                test: /\.(png|jpg)$/,
-                loader: 'url-loader?limit=40000'
-            }
-        ]
-    },
-
-    plugins: plugins
-};

webpack/dev.config.js

@@ -0,0 +1,102 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+
+  devtool: 'cheap-module-source-map',
+
+  entry: {
+    'DPlayer': './src/index.js'
+  },
+
+  output: {
+    path: path.resolve(__dirname, '..', 'dist'),
+    filename: '[name].js',
+    publicPath: '/'
+  },
+
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.scss']
+  },
+
+  module: {
+    strictExportPresence: true,
+    rules: [
+      {
+        test: /\.js$/,
+        enforce: 'pre',
+        loader: require.resolve('eslint-loader'),
+        include: path.resolve(__dirname, '../src'),
+      },
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              cacheDirectory: true,
+              presets: ['env']
+            }
+          }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          require.resolve('style-loader'),
+          {
+            loader: require.resolve('css-loader'),
+            options: {
+              importLoaders: 1
+            }
+          },
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              ident: 'postcss'
+            }
+          },
+          require.resolve('sass-loader')
+        ]
+      },
+      {
+        test: /\.(png|jpg)$/,
+        loader: require.resolve('url-loader'),
+        options: {
+          'limit': 40000
+        }
+      }
+    ]
+  },
+
+  devServer: {
+    compress: true,
+    contentBase: path.resolve(__dirname, '..', 'demo'),
+    clientLogLevel: 'none',
+    quiet: false,
+    open: true,
+    historyApiFallback: {
+      disableDotRule: true
+    },
+    watchOptions: {
+      ignored: /node_modules/
+    }
+  },
+
+  plugins: [
+    new webpack.NamedModulesPlugin()
+  ],
+
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty'
+  },
+
+  performance: {
+    hints: false
+  }
+
+};

webpack/prod.config.js

@@ -0,0 +1,104 @@
+const path = require('path');
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+
+  bail: true,
+
+  devtool: 'source-map',
+
+  entry: {
+    'DPlayer': './src/index.js'
+  },
+
+  output: {
+    path: path.resolve(__dirname, '..', 'dist'),
+    filename: '[name].min.js',
+    publicPath: '/'
+  },
+
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.scss']
+  },
+
+  module: {
+    strictExportPresence: true,
+    rules: [
+      {
+        test: /\.js$/,
+        enforce: 'pre',
+        loader: require.resolve('eslint-loader'),
+        include: path.resolve(__dirname, '../src'),
+      },
+      {
+        test: /\.js$/,
+        use: [
+          require.resolve('template-string-optimize-loader'),
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              compact: true,
+              presets: ['env']
+            }
+          }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          fallback: require.resolve('style-loader'),
+          use: [
+            {
+              loader: require.resolve('css-loader'),
+              options: {
+                importLoaders: 1,
+                minimize: true,
+                sourceMap: true
+              }
+            },
+            {
+              loader: require.resolve('postcss-loader'),
+              options: {
+                ident: 'postcss'
+              }
+            },
+            require.resolve('sass-loader')
+          ]
+        })
+      },
+      {
+        test: /\.(png|jpg)$/,
+        loader: require.resolve('url-loader'),
+        options: {
+          'limit': 40000
+        }
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false,
+        ascii_only: true
+      },
+      sourceMap: true
+    }),
+    new ExtractTextPlugin({
+      filename: '[name].min.css'
+    })
+  ],
+
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+  }
+
+};