some config

.gitignore

@@ -9,6 +9,3 @@
 # node
 node_modules
 npm-debug.log
-
-# other
-dist

package.json

@@ -28,6 +28,7 @@
     "eslint-config-airbnb": "6.x",
     "eslint-plugin-react": "4.x",
     "file-loader": "0.9.0",
+    "html-webpack-plugin": "^2.22.0",
     "less": "2.7.1",
     "less-loader": "2.2.3",
     "lesshint": "2.0.2",

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Ant Design Admin</title>
+</head>
+
+<body>
+  <div id="root" style="height:100%;"></div>
+</body>
+<script src="http://localhost:8080/webpack-dev-server.js"></script>
+</html>

webpack.config.js

@@ -1,55 +1,61 @@
-const webpack = require('webpack');
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
-// 将babel-loader的配置独立出来, 因为webpack的限制: http://stackoverflow.com/questions/33117136/how-to-add-a-query-to-a-webpack-loader-with-multiple-loaders
 const babelLoaderConfig = {
-  presets: ['es2015', 'stage-0', 'react'],  // 开启ES6、部分ES7、react特性, preset相当于预置的插件集合
-  plugins: [['antd', {'style': true}]],  // antd模块化加载, https://github.com/ant-design/babel-plugin-antd
+  presets: ['es2015', 'stage-0', 'react'],
+  plugins: [
+    ['antd', {
+      'style': true
+    }]
+  ],
 };
 
 module.exports = {
   entry: [
-    'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
-    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
-    'babel-polyfill',  // 可以使用完整的ES6特性, 大概增加100KB
-    './src/index.js',  // 编译的入口
+    'webpack-dev-server/client?http://0.0.0.0:8080',
+    'webpack/hot/only-dev-server',
+    'babel-polyfill',
+    './src/index.js'
   ],
 
-  output: {  // 输出的目录和文件名
+  output: {
     path: __dirname + '/dist',
-    filename: 'bundle.js',
+    filename: 'js/bundle.js',
   },
 
   resolve: {
-    modulesDirectories: ['node_modules', './src'],  // import时到哪些地方去寻找模块
-    extensions: ['', '.js', '.jsx'],  // require的时候可以直接使用require('file')，不用require('file.js')
+    modulesDirectories: ['node_modules', './src'],
+    extensions: ['', '.js', '.jsx'],
     alias: {
-      antdcss: 'antd/dist/antd.min.css',  // import时的别名
+      antdcss: 'antd/dist/antd.min.css',
     },
   },
 
   module: {
-    loaders: [  // 定义各种loader
-      {
-        test: /\.jsx?$/,
-        loaders: ['react-hot', 'babel-loader?' + JSON.stringify(babelLoaderConfig)],  // react-hot-loader可以不用刷新页面, 如果用普通的dev-server的话会自动刷新页面
-        exclude: /node_modules/,
-      }, {
-        test: /\.css$/,
-        loader: 'style!css',
-      }, {
-        test: /\.less$/,
-        loader: 'style!css!less',  // 用!去链式调用loader
-      }, {
-        test: /\.(png|jpg|svg)$/,
-        loader: 'url?limit=25000',  // 图片小于一定值的话转成base64
-      },
-    ],
+    loaders: [{
+      test: /\.jsx?$/,
+      loaders: ['react-hot', 'babel-loader?' + JSON.stringify(babelLoaderConfig)],
+      exclude: /node_modules/,
+    }, {
+      test: /\.css$/,
+      loader: 'style!css',
+    }, {
+      test: /\.less$/,
+      loader: 'style!css!less',
+    }, {
+      test: /\.(png|jpg|svg)$/,
+      loader: 'url?limit=25000',
+    }, ],
   },
 
   plugins: [
-    new webpack.BannerPlugin('This file is created by jxy'),   // 生成文件时加上注释
+    new HtmlWebpackPlugin({
+      title: 'Ant Design Admin',
+      filename: 'index.html',
+      template: './src/index.html'
+    }),
     new webpack.DefinePlugin({
-      __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'production' ? 'false' : 'true')),  // magic globals, 用于打印一些调试的日志, webpack -p时会删除
+      __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'production' ? 'false' : 'true')),
     }),
   ],
 };

webpack.config.prod.js

@@ -7,13 +7,12 @@ const babelLoaderConfig = {
 
 module.exports = {
   entry: [
-    // 可能需要polyfill
     './src/index.js',
   ],
 
   output: {
     path: __dirname + '/dist',
-    filename: 'bundle.min.js',
+    filename: 'bundle.js',
     // publicPath: 'http://mycdn.com/', // require时用来生成图片的地址
   },
 
@@ -26,7 +25,6 @@ module.exports = {
     loaders: [
       {
         test: /\.jsx?$/,
-        // 删除一些debug语句
         loaders: ['babel-loader?' + JSON.stringify(babelLoaderConfig), 'strip-loader?strip[]=logger.debug,strip[]=console.log,strip[]=console.debug'],
         exclude: /node_modules/,
       }, {
@@ -43,22 +41,19 @@ module.exports = {
   },
 
   plugins: [
-    // 代码压缩
     new webpack.optimize.UglifyJsPlugin({
       minimize: true,
       compress: {warnings: false},
     }),
-
-    // 抽离公共部分
-    // webpack.optimize.CommonsChunkPlugin
-
+    new HtmlWebpackPlugin({
+      title: 'Ant Design Admin',
+      filename: 'index.html',
+      template: './src/index.html'
+    }),
     new webpack.optimize.DedupePlugin(),
-    // 比对id的使用频率和分布来得出最短的id分配给使用频率高的模块
     new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.optimize.AggressiveMergingPlugin(),
-    // 允许错误不打断程序
     new webpack.NoErrorsPlugin(),
-
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
       __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'production' ? 'false' : 'true')),