{"action":"opened","issue":{"url":"https://api.github.com/repos/Charelyz/retry/issues/5","repository_url":"https://api.github.com/repos/Charelyz/retry","labels_url":"https://api.github.com/repos/Charelyz/retry/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/Charelyz/retry/issues/5/comments","events_url":"https://api.github.com/repos/Charelyz/retry/issues/5/events","html_url":"https://github.com/Charelyz/retry/issues/5","id":324235386,"number":5,"title":"从零开始搭建一个React脚手架","user":{"login":"Charelyz","id":22977916,"avatar_url":"https://avatars2.githubusercontent.com/u/22977916?v=4","gravatar_id":"","url":"https://api.github.com/users/Charelyz","html_url":"https://github.com/Charelyz","followers_url":"https://api.github.com/users/Charelyz/followers","following_url":"https://api.github.com/users/Charelyz/following{/other_user}","gists_url":"https://api.github.com/users/Charelyz/gists{/gist_id}","starred_url":"https://api.github.com/users/Charelyz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Charelyz/subscriptions","organizations_url":"https://api.github.com/users/Charelyz/orgs","repos_url":"https://api.github.com/users/Charelyz/repos","events_url":"https://api.github.com/users/Charelyz/events{/privacy}","received_events_url":"https://api.github.com/users/Charelyz/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-05-18T01:01:06Z","updated_at":"2018-05-18T01:01:06Z","closed_at":null,"author_association":"OWNER","body":"## 项目初始化\r\n``` bash\r\n    yarn init\r\n    yarn add webpack@3.10.0 --dev\r\n```\r\n\r\n## yarn和npm包管理工具的异同\r\n\r\n|description|yarn|npm|\r\n|:-------:|:--------:|:--------|\r\n|项目初始化|yarn init|npm init|\r\n| `package.json`依赖安装| yarn add | npm intall |\r\n| 全局安装| yarn global add xxx@x.x.x| npm install xxx@x.x.x -g|\r\n| 安装一个依赖| yarn add xxx@x.x.x | npm install xxx@x.x.x --save |\r\n| 安装一个开发环境下的依赖| yarn add xxx@x.x.x --dev |  npm install xxx@x.x.x --save-dev|\r\n| 移除某项依赖| yarn remove xxx | npm uninstall xxx --save <br/> npm uninstall --save-dev|\r\n| 运行package.json里面的scripts | yarn run xxx | npm run xxx|\r\n\r\n\r\n## 第一个webpack应用\r\n1. 进入 ![webpack指南](https://webpack.docschina.org/guides/getting-started/)\r\n2. 找到 `webpack.config.js` 并在项目创建 `webpack.config.js`文件，把网页的内容复制上去\r\n3. 创建文件夹结构\r\n![文件目录](./images/20180517203439.png)\r\n4. app.js 输入 `console.log(\"hello webpack\")`\r\n5. 修改 `webpack.config.js` 为如下\r\n``` javascript\r\n    /**\r\n    * webpack配置\r\n    */\r\n    const path = require('path')\r\n\r\n    module.exports = {\r\n        entry: './src/app.js',\r\n        output: {\r\n            filename: 'app.js',\r\n            path: path.resolve(__dirname, './dist')\r\n        }\r\n    }\r\n```\r\n6. 测试打包\r\n``` bash\r\n./node_modules/.bin/webpack\r\n```\r\n\r\n## 改造第一个应用，使webpack打包生成html\r\n1. 安装一个html插件\r\n``` bash\r\n    yarn add html-webpack-plugin@2.30.1 --dev\r\n```\r\n2. 修改`webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\n\r\n// 新增部分\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nmodule.exports = {\r\n    entry: './src/app.js',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    // 新增部分\r\n    plugins: [\r\n        new HtmlWebpackPlugin()\r\n    ]\r\n}\r\n```\r\n3. 测试打包\r\n\r\n经过上面操作之后，可以在`dist`里面发现`index.html`，可能你会好奇，为什么会出现这种情况？其实这就是webpack约定由于配置的结果，能够大大加快我们的开发效率。\r\n> 参考文档：![html-webpack-plugin文档部分](https://webpack.docschina.org/plugins/html-webpack-plugin/)\r\n\r\n\r\n## 自定义模板\r\n1. 修改`webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\n\r\nmodule.exports = {\r\n    entry: './src/app.js',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    plugins: [\r\n        // 新增部分\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        })\r\n    ]\r\n}\r\n```\r\n2. 在src文件夹下创建`index.html`，输入html的基本骨架\r\n``` html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n    <meta name=\"author\" content=\"A+\">\r\n    <title>A-admin</title>\r\n</head>\r\n<body>\r\n    <div id=\"app\">test</div>\r\n</body>\r\n</html>\r\n```\r\n3. 测试打包\r\n\r\n> 参考官方：![html-webpack-plugin可选配置](https://github.com/jantimon/html-webpack-plugin#)\r\n\r\n## 处理ES6语法\r\n1. 安装babel-core、babel-preset-env、babel-loader\r\n``` bash\r\n    yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev\r\n```\r\n2. 修改`webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nmodule.exports = {\r\n    entry: './src/app.js',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    // 新增部分\r\n    module: {\r\n        rules: [\r\n        {\r\n                test: /\\.js$/,\r\n                exclude: /(node_modules)/, // 没有使用bower，所以去掉了bower_components\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env'] // '@babel/preset-env' 可以简写为 'env'\r\n                    }\r\n                }\r\n        }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        })\r\n    ]\r\n}\r\n```\r\n3. 测试打包\r\n\r\n> 参考文档：![babel-loader](https://webpack.docschina.org/loaders/babel-loader/)\r\n\r\n\r\n## 处理React语法\r\n1. 安装 babel-preset-react\r\n``` bash\r\n    yarn add babel-preset-react@6.24.1 --dev\r\n```\r\n2. 修改`webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nmodule.exports = {\r\n    entry: './src/app.js',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            {\r\n                test: /\\.js$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    // 新增部分\r\n                    options: {\r\n                        presets: ['env','react'] // webpack根据配置环境自动打包\r\n                    }\r\n                }\r\n            }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        })\r\n    ]\r\n}\r\n```\r\n\r\n## 集成react\r\n1. 安装 react、react-dom\r\n```\r\n    yarn add react@16.2.0 react-dom@16.2.0\r\n```\r\n2. 修改`webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nmodule.exports = {\r\n    // 新增部分：入口文件改为app.jsx\r\n    entry: './src/app.jsx',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            {\r\n                // 新增部分：babel处理jsx\r\n                test: /\\.jsx$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env','react']\r\n                    }\r\n                }\r\n            }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        })\r\n    ]\r\n}\r\n```\r\n3. 修改`src/app.js`为`src/app.jsx`并输入下面代码：\r\n``` jsx\r\nimport React from 'react'\r\nimport ReactDOM from 'react-dom'\r\n\r\nReactDOM.render(\r\n  <h1>Hello, world!</h1>,\r\n  document.getElementById('app') // 注意这里是app\r\n)\r\n```\r\n4. webpack打包，文件形式打开`dist/index.html`: 看到 Hello, world!\r\n\r\n> 参考文档：![Add React to an Existing Application](https://reactjs.org/docs/add-react-to-an-existing-app.html)\r\n\r\n## css打包\r\n1. 安装 style-loader、css-loader\r\n``` bash\r\n    yarn add style-loader@0.19.1 css-loader@0.28.8 --dev\r\n```\r\n2. 修改 `webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nmodule.exports = {\r\n    entry: './src/app.jsx',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            {\r\n                test: /\\.jsx$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env','react']\r\n                    }\r\n                }\r\n            },\r\n            // 新增部分\r\n            {\r\n                 test: /\\.css$/,\r\n                 use: [\r\n                   'style-loader',\r\n                   'css-loader'\r\n                 ]\r\n               }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        })\r\n    ]\r\n}\r\n```\r\n4. webpack打包，文件形式打开`dist/index.html`: Hello, world!变为红色字体\r\n5. 待处理问题：dist里面并没有css文件，经过查找发现`dist/app.js`里面有这么一句话\r\n``` javascript\r\nexports.push([module.i, \"#app{\\r\\n    color: red\\r\\n}\", \"\"]);\r\n```\r\n> 说明css以js的形式的运行的。和我们预期不符(单独分离出css并引入)。\r\n\r\n> 参考文档：![asset-management](https://webpack.docschina.org/guides/asset-management/)\r\n\r\n## 分离CSS到单独的文件\r\n1. 安装 extract-text-webpack-plugin\r\n``` bash\r\n    yarn add extract-text-webpack-plugin@3.0.2\r\n```\r\n2. 修改 `webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\n// 新增部分: 注意 require(\"extract-text-webpack-plugin\") 多了webpack这个单词\r\nconst ExtractTextPlugin = require(\"extract-text-webpack-plugin\")\r\nmodule.exports = {\r\n    entry: './src/app.jsx',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            {\r\n                test: /\\.jsx$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env','react']\r\n                    }\r\n                }\r\n            },\r\n            {\r\n                 test: /\\.css$/,\r\n                 // 新增部分\r\n                 use: ExtractTextPlugin.extract({\r\n                    fallback: \"style-loader\",\r\n                    use: \"css-loader\"\r\n                  })\r\n               }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        }),\r\n        // 新增部分\r\n        new ExtractTextPlugin(\"index.css\")\r\n    ]\r\n}\r\n```\r\n\r\n> 参考文档：![ExtractTextWebpackPlugin参考配置](https://webpack.docschina.org/plugins/extract-text-webpack-plugin)\r\n\r\n## 处理sass\r\n1. 安装 sass-loader\r\n``` bash\r\n    yarn add sass-loader@6.0.6 --dev\r\n```\r\n2. 修改 `webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst ExtractTextPlugin = require(\"extract-text-webpack-plugin\")\r\nmodule.exports = {\r\n    entry: './src/app.jsx',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            /** jsx */\r\n            {\r\n                test: /\\.jsx$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env','react']\r\n                    }\r\n                }\r\n            },\r\n            /** css */\r\n            {\r\n                 test: /\\.css$/,\r\n                 use: ExtractTextPlugin.extract({\r\n                    fallback: \"style-loader\",\r\n                    use: \"css-loader\"\r\n                  })\r\n            },\r\n            /** sass */\r\n            // 新增部分\r\n            {\r\n                test: /\\.scss$/,\r\n                use: ExtractTextPlugin.extract({\r\n                  fallback: 'style-loader',\r\n                  use: ['css-loader', 'sass-loader'] //如果需要，可以在 sass-loader 之前将 resolve-url-loader 链接进来\r\n                })\r\n            }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        }),\r\n        new ExtractTextPlugin(\"index.css\")\r\n    ]\r\n}\r\n```\r\n3. 新建文件`src/index.scss`\r\n``` scss\r\nbody{\r\n    background: gray;\r\n    #app{\r\n        font-size: 25pt;\r\n    }\r\n}\r\n```\r\n4. 打包测试：报错,这里面有一个巨坑详见文档\r\n> ![sass-loader使用](https://webpack.docschina.org/loaders/sass-loader/#src/components/Sidebar/Sidebar.jsx)\r\n5. 根据文档，需要安装 node-sass\r\n``` bash\r\n    yarn add node-sass@4.7.2 --dev\r\n```\r\n6. 再次打包测试\r\n\r\n> 参考文档：![管理资源参考配置](https://webpack.docschina.org/guides/asset-management/) 和 ![使用sass-loader](https://webpack.docschina.org/loaders/sass-loader/#src/components/Sidebar/Sidebar.jsx)\r\n\r\n## 加载图片\r\n1. 安装 file-loader 和 url-loader\r\n``` bash\r\n    yarn add file-loader@1.1.6 url-loader@0.6.2 --dev\r\n```\r\n2. 修改配置文件`webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst ExtractTextPlugin = require(\"extract-text-webpack-plugin\")\r\nmodule.exports = {\r\n    entry: './src/app.jsx',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            /** jsx */\r\n            {\r\n                test: /\\.jsx$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env','react']\r\n                    }\r\n                }\r\n            },\r\n            /** css */\r\n            {\r\n                 test: /\\.css$/,\r\n                 use: ExtractTextPlugin.extract({\r\n                    fallback: \"style-loader\",\r\n                    use: \"css-loader\"\r\n                  })\r\n            },\r\n            /** sass */\r\n            {\r\n                test: /\\.scss$/,\r\n                use: ExtractTextPlugin.extract({\r\n                  fallback: 'style-loader',\r\n                  use: ['css-loader', 'sass-loader']\r\n                })\r\n            },\r\n            /** image */\r\n            // 新增部分\r\n            {\r\n                test: /\\.(png|jpg|gif)$/,\r\n                use: [\r\n                  {\r\n                    loader: 'url-loader',\r\n                    options: {\r\n                      limit: 8192\r\n                    }\r\n                  }\r\n                ]\r\n            }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        }),\r\n        new ExtractTextPlugin(\"index.css\")\r\n    ]\r\n}\r\n```\r\n3. 修改index.scss并打包测试: 准备两张图片，一张大小大于8K，一张小于8K，然后修改分别引入观察Network的图片是base64还是原图\r\n``` scss\r\nbody{\r\n    //background: gray url(./lowthan8K.jpg);\r\n    background: gray url(./highthan8K.jpg);\r\n    #app{\r\n        font-size: 25pt\r\n    }\r\n}\r\n```\r\n\r\n> 参考文档：![管理资源参考配置](https://webpack.docschina.org/guides/asset-management/) 和 ![url-loader优化小图片](https://webpack.docschina.org/loaders/url-loader)\r\n\r\n\r\n## 引入字体库 fontawesome\r\n1. 安装fontawesome\r\n``` bash\r\n    yarn add fontawesome\r\n```\r\n2. 引入 fontawesome.min.css\r\n``` jsx\r\nimport React from 'react'\r\nimport ReactDOM from 'react-dom'\r\n\r\nimport 'font-awesome/css/font-awesome.min.css'\r\nimport './index.css'\r\nimport './index.scss'\r\n\r\nReactDOM.render(\r\n    {/* 新增部分 */}\r\n    <div>\r\n        <i className=\"fa fa-address-book\"></i>\r\n        <h1>Hello, world!</h1>\r\n    </div>,\r\n    document.getElementById('app')\r\n)\r\n```\r\n> 注意：react规定Dom元素和js之间即div后面有一个`,`\r\n3. 修改`webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst ExtractTextPlugin = require(\"extract-text-webpack-plugin\")\r\nmodule.exports = {\r\n    entry: './src/app.jsx',\r\n    output: {\r\n        filename: 'app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            /** jsx */\r\n            {\r\n                test: /\\.jsx$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env','react']\r\n                    }\r\n                }\r\n            },\r\n            /** css */\r\n            {\r\n                 test: /\\.css$/,\r\n                 use: ExtractTextPlugin.extract({\r\n                    fallback: \"style-loader\",\r\n                    use: \"css-loader\"\r\n                  })\r\n            },\r\n            /** sass */\r\n            {\r\n                test: /\\.scss$/,\r\n                use: ExtractTextPlugin.extract({\r\n                  fallback: 'style-loader',\r\n                  use: ['css-loader', 'sass-loader']\r\n                })\r\n            },\r\n            /** image */\r\n            {\r\n                test: /\\.(png|jpg|gif)$/,\r\n                use: [\r\n                  {\r\n                    loader: 'url-loader',\r\n                    options: {\r\n                      limit: 8192\r\n                    }\r\n                  }\r\n                ]\r\n            },\r\n            // 新增部分\r\n            /** font */\r\n            {\r\n                 test: /\\.(woff|woff2|eot|ttf|svg|otf)$/,\r\n                 use: [\r\n                   'file-loader'\r\n                 ]\r\n            }\r\n        ]\r\n    },\r\n    plugins: [\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        }),\r\n        new ExtractTextPlugin(\"index.css\")\r\n    ]\r\n}\r\n```\r\n4. 打包测试\r\n\r\n## 模块划分和处理公共模块\r\n1. 修改`webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst ExtractTextPlugin = require(\"extract-text-webpack-plugin\")\r\nconst webpack           = require(\"webpack\")\r\nmodule.exports = {\r\n    entry: './src/app.jsx',\r\n    output: {\r\n        filename: 'js/app.js',\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            /** jsx */\r\n            {\r\n                test: /\\.jsx$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env','react']\r\n                    }\r\n                }\r\n            },\r\n            /** css */\r\n            {\r\n                 test: /\\.css$/,\r\n                 use: ExtractTextPlugin.extract({\r\n                    fallback: \"style-loader\",\r\n                    use: \"css-loader\"\r\n                  })\r\n            },\r\n            /** sass */\r\n            {\r\n                test: /\\.scss$/,\r\n                use: ExtractTextPlugin.extract({\r\n                  fallback: 'style-loader',\r\n                  use: ['css-loader', 'sass-loader']\r\n                })\r\n            },\r\n            /** image */\r\n            {\r\n                test: /\\.(png|jpg|gif)$/,\r\n                use: [\r\n                  {\r\n                    loader: 'url-loader',\r\n                    options: {\r\n                      limit: 8192,\r\n                      name: 'resource/images/[name].[ext]'\r\n                    }\r\n                  }\r\n                ]\r\n            },\r\n            /** font */\r\n            {\r\n                 test: /\\.(woff|woff2|eot|ttf|svg|otf)$/,\r\n                 use: [\r\n                        {\r\n                            loader: 'file-loader',\r\n                            options: {\r\n                                name: 'resource/font/[name].[ext]'\r\n                            }\r\n                        }\r\n                 ]\r\n            }\r\n        ]\r\n    },\r\n    plugins: [\r\n        /** 处理html */\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        }),\r\n        /** 独立css */\r\n        new ExtractTextPlugin({\r\n            // 新增部分\r\n            filename: 'css/[name].css'\r\n        }),\r\n        // 新增部分\r\n        /** 提出公共模块 */\r\n        new webpack.optimize.CommonsChunkPlugin({\r\n            name: \"common\",         // 手动指定的公共模块\r\n            filename: \"js/base.js\"  // 最后通用部分打包成base.js\r\n        })\r\n    ]\r\n}\r\n```\r\n2. 打包测试，生成如下目录结构\r\n![模块划分目录结构](./images/20180518021646.png)\r\n\r\n## webpack-dev-server\r\n1. 安装 webpack-dev-server\r\n``` bash\r\n    yarn add webpack-dev-server@2.9.7 --dev\r\n```\r\n2. 配置 `webpack.config.js`\r\n``` javascript\r\nconst path              = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst ExtractTextPlugin = require(\"extract-text-webpack-plugin\")\r\nconst webpack           = require(\"webpack\")\r\nmodule.exports = {\r\n    entry: './src/app.jsx',\r\n    output: {\r\n        filename: 'js/app.js',\r\n        // 新增部分\r\n        publicPath: '/dist/', // 从根目录开始引用，具体表现为：index.html -> src=js/app.js  ==> index.html ==> src=/dist/js/app.js\r\n        path: path.resolve(__dirname, './dist')\r\n    },\r\n    // 新增部分\r\n    devServer: {\r\n        port: 2333 // 修改端口\r\n    },\r\n    module: {\r\n        rules: [\r\n            /** jsx */\r\n            {\r\n                test: /\\.jsx$/,\r\n                exclude: /(node_modules)/,\r\n                use: {\r\n                    loader: 'babel-loader',\r\n                    options: {\r\n                        presets: ['env','react']\r\n                    }\r\n                }\r\n            },\r\n            /** css */\r\n            {\r\n                 test: /\\.css$/,\r\n                 use: ExtractTextPlugin.extract({\r\n                    fallback: \"style-loader\",\r\n                    use: \"css-loader\"\r\n                  })\r\n            },\r\n            /** sass */\r\n            {\r\n                test: /\\.scss$/,\r\n                use: ExtractTextPlugin.extract({\r\n                  fallback: 'style-loader',\r\n                  use: ['css-loader', 'sass-loader']\r\n                })\r\n            },\r\n            /** image */\r\n            {\r\n                test: /\\.(png|jpg|gif)$/,\r\n                use: [\r\n                  {\r\n                    loader: 'url-loader',\r\n                    options: {\r\n                      limit: 8192,\r\n                      name: 'resource/images/[name].[ext]'\r\n                    }\r\n                  }\r\n                ]\r\n            },\r\n            /** font */\r\n            {\r\n                 test: /\\.(woff|woff2|eot|ttf|svg|otf)$/,\r\n                 use: [\r\n                        {\r\n                            loader: 'file-loader',\r\n                            options: {\r\n                                name: 'resource/font/[name].[ext]'\r\n                            }\r\n                        }\r\n                 ]\r\n            }\r\n        ]\r\n    },\r\n    plugins: [\r\n        /** 处理html */\r\n        new HtmlWebpackPlugin({\r\n            template: './src/index.html'\r\n        }),\r\n        /** 独立css */\r\n        new ExtractTextPlugin({\r\n            filename: 'css/[name].css'\r\n        }),\r\n        /** 提出公共模块 */\r\n        new webpack.optimize.CommonsChunkPlugin({\r\n            name: \"common\",         // 手动指定的公共模块\r\n            filename: \"js/base.js\"  // 最后通用部分打包成base.js\r\n        })\r\n    ]\r\n}\r\n```\r\n\r\n## 人性化配置\r\npackage.json\r\n``` json\r\n{\r\n  \"name\": \"A-admin\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"A-admin is a management system which is based on react\",\r\n  \"main\": \"app.js\",\r\n  // 新增部分\r\n  \"scripts\": {\r\n    \"dev\": \"./node_modules/.bin/webpack-dev-server\",\r\n    \"build\": \"./node_modules/.bin/webpack -p\"\r\n  },\r\n  \"repository\": \"https://github.com/Charelyz/A-admin.git\",\r\n  \"author\": \"A+\",\r\n  \"license\": \"MIT\",\r\n  \"devDependencies\": {\r\n    \"babel-core\": \"6.26.0\",\r\n    \"babel-loader\": \"7.1.2\",\r\n    \"babel-preset-env\": \"1.6.1\",\r\n    \"babel-preset-react\": \"6.24.1\",\r\n    \"css-loader\": \"0.28.8\",\r\n    \"file-loader\": \"1.1.6\",\r\n    \"html-webpack-plugin\": \"2.30.1\",\r\n    \"node-sass\": \"4.7.2\",\r\n    \"sass-loader\": \"6.0.6\",\r\n    \"style-loader\": \"0.19.1\",\r\n    \"url-loader\": \"0.6.2\",\r\n    \"webpack\": \"3.10.0\",\r\n    \"webpack-dev-server\": \"2.9.7\"\r\n  },\r\n  \"dependencies\": {\r\n    \"extract-text-webpack-plugin\": \"^3.0.2\",\r\n    \"font-awesome\": \"^4.7.0\",\r\n    \"react\": \"16.2.0\",\r\n    \"react-dom\": \"16.2.0\"\r\n  }\r\n}\r\n```"}}
{"actor":{"display_login":"Charelyz"}}