修改部分配置,以支持antd

Liuqing650 · May 19, 2018 · 9b15a74 · 9b15a74
1 parent f0e075c
commit 9b15a74
Show file tree

Hide file tree

Showing 7 changed files with 939 additions and 282 deletions.
diff --git a/.babelrc b/.babelrc
@@ -4,13 +4,16 @@
     "stage-0",
     "es2015"
   ],
+  "comments": true,
   "plugins": [
     "transform-runtime",
     "transform-decorators-legacy",
     [
       "import",
       {
-        "libraryName": "antd"
+        "libraryName": "antd",
+        "libraryDirectory": "es",
+        "style": true
       }
     ],
     [
@@ -19,5 +22,22 @@
         "spec": true
       }
     ]
-  ]
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        [
+          "react-transform",
+          {
+            "transforms": [
+              {
+                "transform": "react-transform-catch-errors",
+                "imports": ["react", "redbox-react"]
+              }
+            ]
+          }
+        ]
+      ]
+    }
+  }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,32 @@
+
+> The latest CHANGELOG is written in https://github.com/Liuqing650/webpack-antd/releases .
+
+## `0.0.1`
+
+- First version
+- 添加webpacke-dev-server配置
+- 添加webpack.dev.config配置和babel
+- 增加 **CHANGELOG** 日志
+- 添加 `url-loader` 支持图片处理，压缩
+- 修改 `css-loader` 路径，支持末尾追加 `hash`
+  `localIdentName: '[path]__[name]__[local]__[hash:base64:5]',`
+- 添加 `babel` ES7支持插件: `babel-plugin-transform-decorators-legacy`
+- 添加 `babel` 复用模块插件: `babel-plugin-transform-runtime`
+- 新增多线程打包配置项, `isHappy = true;` 默认开启
+- 修复样式路径错误问题
+  ```
+    // 删除该插件
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        // Javascript lint
+        eslint: { failOnError: eslint },
+        debug: isDev,
+        minimize: !isDev
+      }
+    })
+  ```
+  - 添加错误捕获插件 `react-transform-catch-errors`
+  - 添加 `antd` 模块
+  - 增加 `less-loader`配置
+    以排除 `node_modules/` 下样式名称被误解析.
+  - 基本配置完成,可选择 [mobx](https://github.com/mobxjs/mobx) 或者 [redux](https://github.com/reduxjs/redux) 等
diff --git a/README.md b/README.md
@@ -1,35 +1,35 @@
 # webpack-demo
 
   - 使用webpack配置简单服务,用于学习
-   - 1. 配置 hash 文件名
-    - 作用： 部分前端代码更新后，由于文件名相同，浏览器继续使用原来的静态文件，不会更新，将文件名改为hash值后即可解决此问题，chunkhash则是只会修改有变动的文件名, hash则是全修改。
-    - 错误源： ERROR in chunk detail [entry] [name]-[chunkhash].js Cannot use [chunkhash] for chunk in ‘[name]-[chunkhash].js’ (use [hash] instead)
-    - 解决方式: 将热替换插件 HotModuleReplacementPlugin() 放到 webpack.dev.js 配置下，打包时候调用的 webpack.prod.js
-   - 2. 提取第三方库
-    - 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中
-      ```
-        -   entry: './src/index.js',
-        +   entry: {
-        +     main: './src/index.js',
-        +     vendor: [
-        +       'lodash'
-        +     ]
-        +   },
-          ...
-        +   new webpack.optimize.CommonsChunkPlugin({
-        +     name: 'vendor'
-        +   }),
-            new webpack.optimize.CommonsChunkPlugin({
-              name: 'runtime'
-            })
-      ```
-   - 3. 重新修改模块标识符
-    - 作用: 第三方库单独提取出来后，新增文件时 vendor 的文件名依然会修改， 使用插件解决此问题
-    - 插件: NamedModulesPlugin 或者 HashedModuleIdsPlugin 
-    - 区别: NamedModulesPlugin 使用模块的路径，而不是数字标识符,有助于在开发过程中输出结果的可读性, HashedModuleIdsPlugin 是数字标识符, 执行时间会短一些
-   - 4. 新增多线程打包配置项, isHappy = true; 默认开启
+    - 1. 配置 hash 文件名
+      - 作用： 部分前端代码更新后，由于文件名相同，浏览器继续使用原来的静态文件，不会更新，将文件名改为hash值后即可解决此问题，chunkhash则是只会修改有变动的文件名, hash则是全修改。
+      - 错误源： ERROR in chunk detail [entry] [name]-[chunkhash].js Cannot use [chunkhash] for chunk in ‘[name]-[chunkhash].js’ (use [hash] instead)
+      - 解决方式: 将热替换插件 HotModuleReplacementPlugin() 放到 webpack.dev.js 配置下，打包时候调用的 webpack.prod.js
+    - 2. 提取第三方库
+      - 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中
+        ```
+          -   entry: './src/index.js',
+          +   entry: {
+          +     main: './src/index.js',
+          +     vendor: [
+          +       'lodash'
+          +     ]
+          +   },
+            ...
+          +   new webpack.optimize.CommonsChunkPlugin({
+          +     name: 'vendor'
+          +   }),
+              new webpack.optimize.CommonsChunkPlugin({
+                name: 'runtime'
+              })
+        ```
+    - 3. 重新修改模块标识符
+      - 作用: 第三方库单独提取出来后，新增文件时 vendor 的文件名依然会修改， 使用插件解决此问题
+      - 插件: NamedModulesPlugin 或者 HashedModuleIdsPlugin 
+      - 区别: NamedModulesPlugin 使用模块的路径，而不是数字标识符,有助于在开发过程中输出结果的可读性, HashedModuleIdsPlugin 是数字标识符, 执行时间会短一些
+    - 4. 新增多线程打包配置项, isHappy = true; 默认开启
 
-   - 5. 修复了样式路径错误问题
+    - 5. 修复了样式路径错误问题
       问题出现原因:
       ```
         // 删除该插件
@@ -42,6 +42,7 @@
           }
         })
       ```
+    - 6. 新增了错误捕获插件 `react-transform-catch-errors`
 
 # 新增了插件
 

diff --git a/package.json b/package.json
@@ -32,13 +32,13 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@antv/g6": "^1.2.6",
-    "autoprefixer": "^8.3.0",
+    "autoprefixer": "^8.5.0",
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-import": "^1.7.0",
+    "babel-plugin-react-transform": "^3.0.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -62,24 +62,24 @@
     "file-loader": "^1.1.5",
     "happypack": "^4.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "immutable": "3.7.4",
     "less": "^3.0.1",
     "less-loader": "^4.1.0",
     "os": "^0.1.1",
     "postcss-loader": "^2.1.4",
+    "react-transform-catch-errors": "^1.0.2",
+    "redbox-react": "^1.6.0",
+    "rimraf": "^2.6.2",
     "style-loader": "^0.19.1",
-    "stylelint": "^9.2.1",
+    "stylelint": "^8.0.0",
     "stylelint-webpack-plugin": "^0.10.5",
     "uglifyjs-webpack-plugin": "^1.1.4",
     "webpack": "^3.10.0",
-    "webpack-dev-middleware": "^2.0.1",
     "webpack-dev-server": "^2.9.7",
-    "webpack-hot-middleware": "^2.22.1",
-    "webpack-merge": "^4.1.1",
     "webpack-parallel-uglify-plugin": "^1.1.0"
   },
   "dependencies": {
-    "autoprefixer": "^8.5.0",
-    "babel-plugin-import": "^1.6.3",
+    "antd": "^3.5.2",
     "babel-runtime": "^6.26.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

diff --git a/src/components/index.js b/src/components/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from 'antd';
 import ChildPage from './childPage';
 import styles from './index.less';
 
@@ -9,7 +10,8 @@ const Example = () => {
   return (
     <div>
       <p className={styles.text}>Example</p>
-      <button onClick={onClick}>Click Button</button>
+      <Button onClick={onClick}>Click Button</Button>
+      <Button type="primary" icon="search">Search</Button>
       <ChildPage />
     </div>
   );

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,6 +27,7 @@ const createHappyPlugin = (id, loaders) => new HappyPack({
   threadPool: HappyPack.ThreadPool({ size: os.cpus().length - 1 }),
   verbose: true, // 日志
 });
+
 // 设置插件环境 development/prodcution
 const getPlugins = () => {
   // Common
@@ -96,7 +97,26 @@ const getPlugins = () => {
       ),
       createHappyPlugin(
         'css',
-        [ 'css-loader', 'postcss-loader']
+        ['css-loader', 'postcss-loader']
+      ),
+      createHappyPlugin(
+        'cssModules',
+        [
+          'css-loader',
+          'postcss-loader'
+        ]
+      ),
+      createHappyPlugin(
+        'lessModules',
+        [
+          'css-loader', 'postcss-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true
+            }
+          }
+        ]
       ),
       createHappyPlugin(
         'less',
@@ -105,6 +125,7 @@ const getPlugins = () => {
             loader: 'css-loader',
             options: {
               modules: true,
+              import: true,
               importLoaders: 1,
               localIdentName: '[path]__[name]__[local]__[hash:base64:5]',
               sourceMap: true
@@ -116,6 +137,7 @@ const getPlugins = () => {
             options: {
               outputStyle: 'expanded',
               sourceMap: true,
+              javascriptEnabled: true,
               sourceMapContents: !isDev
             }
           }
@@ -133,7 +155,7 @@ const getBabelLoaders = () => {
     return {
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
-      loader: isHappy ? 'happypack/loader?id=babel' : 'babel-loader',
+      loader: 'happypack/loader?id=babel'
     };
   }
   return {
@@ -145,13 +167,22 @@ const getBabelLoaders = () => {
     }
   };
 };
+const vendor = [
+  'react',
+  'react-dom',
+  'redbox-react'
+  // 'axios'
+];
 module.exports = {
   name: 'client',
   target: 'web',
   cache: isDev,
   profile: isDev, // 是否捕捉 Webpack 构建的性能信息
   context: path.resolve(process.cwd()),
-  entry: './src/index.js',
+  entry: {
+    index: './src/index.js',
+    vendor
+  },
   devtool: isDev ? 'inline-source-map' : 'hidden-source-map',
   output: {
     path: path.join(__dirname, 'public/dist'),
@@ -162,7 +193,10 @@ module.exports = {
   },
   devServer: {
     contentBase: path.join(__dirname, "public"),
-    historyApiFallback: true
+    historyApiFallback: true,
+    headers: {
+      'maby': 'demo'
+    }
   },
   plugins: getPlugins(),
   module: {
@@ -174,10 +208,20 @@ module.exports = {
         loader: 'eslint-loader'
       },
       getBabelLoaders(),
+      {
+        test: /\.css$/,
+        include: /node_modules/,
+        use: ExtractTextPlugin.extract(
+          isHappy ? ('style-loader', 'happypack/loader?id=cssModules') :
+          [
+            'style-loader', 'css-loader', 'postcss-loader'
+          ]
+        )
+      },
       {
         test: /\.css$/,
         exclude: /node_modules/,
-        use: ExtractTextPlugin.extract(// 'happypack/loader?id=css'
+        use: ExtractTextPlugin.extract(
           isHappy ? ('style-loader', 'happypack/loader?id=css') :
           [
             'style-loader',
@@ -187,27 +231,47 @@ module.exports = {
         )
       }, {
         test: /\.less$/,
+        include: /node_modules/,
+        use: ExtractTextPlugin.extract(
+          isHappy ? ('style-loader', 'happypack/loader?id=lessModules') :
+          [
+            'css-loader', 'postcss-loader', 
+              {
+                loader: 'less-loader',
+                options: {
+                  javascriptEnabled: true
+                }
+              }
+          ]
+        )
+      }, {
+        test: /\.less$/,
+        exclude: /node_modules/,
         use: ExtractTextPlugin.extract(
           isHappy ? 'happypack/loader?id=less' : 
-          [{
-            loader: 'css-loader',
-            options: {
-              modules: true,
-              importLoaders: 1,
-              localIdentName: '[path]__[name]__[local]__[hash:base64:5]',
-              sourceMap: true
-            }
-          },
-          { loader: 'postcss-loader', options: { sourceMap: true } },
-          {
-            loader: 'less-loader',
-            options: {
-              outputStyle: 'expanded',
-              sourceMap: true,
-              sourceMapContents: !isDev
+          [
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                import: true,
+                importLoaders: 1,
+                localIdentName: '[path]__[name]__[local]__[hash:base64:5]',
+                sourceMap: true
+              }
+            },
+            { loader: 'postcss-loader', options: { sourceMap: true } },
+            {
+              loader: 'less-loader',
+              options: {
+                outputStyle: 'expanded',
+                sourceMap: true,
+                javascriptEnabled: true,
+                sourceMapContents: !isDev
+              }
             }
-          }
-        ])
+          ]
+        )
       },
       {
         test: /\.(png|svg|jpg|gif)$/,