前端开发规范-react/react-router/redux/webpack/es6开发配置
项目地址： https://github.com/fangyongbao/react-router-redux-webpack
image.png
这里的webpack配置是针对多页面开发， 单页面中进行路由跳转，这里需要5个相关配置文件：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">package.json 定义项目依赖模块 以及 定义开启服务器和打包命令 helpers.js 获取入口文件和html文件 webpack.base.config.js 定义webpack基础配置 webpack.dev.config.js 定义webpack开发配置 webpack.prod.config.js 定义webpack生产配置</pre>
改项目中包含了：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">路由跳转 数据请求模块封装 webview与js交互模块封装 配置文件分离 自动打包多个html文件 以一个简单的例子实现 dispatch->action->reducer->state->view流程 定义共用sass文件 提取css
css自动添加浏览器前缀 上线包添加静态资源版本号 上线包css/js压缩 定义第三方字体库</pre>
使用方式：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1.npm install webpack-dev-server -g 全局安装服务器 2.到package.json所在目录执行npm install 安装依赖模块 3.npm run start 开启服务器(包含热更新) 4.浏览器访问localhost:80 5.npm run build打包</pre>
webpack相关配置文件
package.json文件：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> { "name": "pass", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --inline --hot --port 3000 --progress --profile --colors --watch --display-error-details --display-cached --config ./webpack.dev.config.js", "build": "webpack --progress --profile --colors --display-error-details --display-cached --bail --config ./webpack.prod.config.js" }, "author": "maicon", "license": "ISC", "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-react": "^6.0.0", "copy-webpack-plugin": "^3.0.1", "css-loader": "^0.23.0", "express": "^4.13.3", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "glob": "^7.0.6", "html-webpack-plugin": "^2.8.1", "json-loader": "^0.5.4", "node-sass": "^3.8.0", "sass-loader": "^4.0.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.12.2" }, "dependencies": { "babel-polyfill": "^6.13.0", "es6-promise": "^3.2.1", "jquery": "^3.1.0", "md5": "^2.2.1", "react": "^15.3.0", "react-dom": "^15.3.0", "react-redux": "^4.4.5", "react-router": "^2.7.0", "redux": "^3.5.2", "redux-thunk": "^2.1.0" } }</pre>
helpers.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var glob = require('glob'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); function getHtmlPlugin() { var buildPath = ''; var plugins = []; glob.sync('./.html').forEach(function (name) { //[^/]不匹配这个集合中的任何一个字符 var n = name.match(/([^/]+).html/)[1]; plugins.push( new HtmlWebpackPlugin({ filename:buildPath+n+'.html', template:name, inject:false }) ) }); return plugins; } function getEntry() { var entry = {}; glob.sync('./entry/.js').forEach(function (name) { console.log(name); //[^/]不匹配这个集合中的任何一个字符 var n = name.match(/([^/]+).js/)[1]; entry[n] = name; }); return entry; }; exports.getHtmlPlugin = getHtmlPlugin; exports.getEntry = getEntry;</pre>
webpack.base.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); module.exports = { //入口文件 entry: helpers.getEntry(), //输出文件 output: { path: path.join(__dirname, '/dist'), //热更新资源存放目录 //publicPath:'/', filename: 'js/[name].js', }, resolve: { //定义模块缩写名称 alias: { 'common.scss':path.join(__dirname,'/src/assets/scss/common.scss') }, //resolve 指定可以被 import 的文件后缀 extensions: ['', '.js', '.css', '.scss'] }, module: { //加载器配置 loaders: [ { test:/.js?$/, loader:'babel-loader', exclude: /node_modules/, query:{ presets:['es2015','react'] } }, { test: /.scss/, loader: 'style-loader!css-loader!sass-loader' }, { test: /.css$/, loader: 'style-loader!css-loader' }, { test: /.(jpe?g|png|gif|svg)$/i, loader: 'url-loader?limit=1000&name=images/[name].[ext]', query:{} }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: 'fonts/[name].[ext]' } } ] }, //插件项 plugins: [ ] }</pre>
webpack.dev.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); var commonWebpack = require('./webpack.base.config'); //var CopyWebpackPlugin = require('copy-webpack-plugin'); const METADATA = { host: '.' }; module.exports = Object.assign({}, commonWebpack, { //供html使用的变量 metadata: METADATA, //开发环境设定独立的插件 plugins: [ //commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来 new webpack.optimize.CommonsChunkPlugin('js/common.js'), //代码热替换 new webpack.HotModuleReplacementPlugin(), //将图片拷贝到指定位置 // new CopyWebpackPlugin([{ // from: 'src/assets/images', // to: 'images' // }]), //React 官方提供的代码是已经合并的, 这个是 Webpack 不推荐的用法, //在合并话的代码上进行定制有点麻烦, Webpack 提供了设置环境变量来优化代码的方案: new webpack.DefinePlugin({ //配置组件中使用的变量,组件中可以直接使用{metadata.host} metadata:JSON.stringify(METADATA), "process.env": { NODE_ENV: JSON.stringify("production") } }) //concat进行数组合并 ].concat(helpers.getHtmlPlugin()) }); </pre>
webpack.prod.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); var commonWebpack = require('./webpack.base.config'); var ExtractTextPlugin = require('extract-text-webpack-plugin') //var CopyWebpackPlugin = require('copy-webpack-plugin'); const METADATA = { host: '.' }; module.exports = Object.assign({}, commonWebpack, { //供html使用的变量 metadata: METADATA, plugins: [ //commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来 new webpack.optimize.CommonsChunkPlugin('js/common.js'), new webpack.HotModuleReplacementPlugin(), //将图片拷贝到指定位置 // new CopyWebpackPlugin([{ // from: 'src/assets/images', // to: 'images' // }]), // 提取css为单文件 //new ExtractTextPlugin("css/[name].css"), //压缩js代码 new webpack.optimize.UglifyJsPlugin({ output: { comments: false }, compress: { warnings: false } }), //React 官方提供的代码是已经合并的, 这个是 Webpack 不推荐的用法, //在合并话的代码上进行定制有点麻烦, Webpack 提供了设置环境变量来优化代码的方案: new webpack.DefinePlugin({ //配置组件中使用的变量,组件中可以直接使用{metadata.host} metadata:JSON.stringify(METADATA), "process.env": { NODE_ENV: JSON.stringify("production") } }) //concat进行数组合并 ].concat(helpers.getHtmlPlugin()) });</pre>
1.预备知识
这个课程的内容是用
React写一个新闻网页，我们用npm来管理项目，且使用webpack模块打包机进行打包。
1.1 关于npm
npm通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等；
在进行此项目之前，我有一定的npm基础，所以在做项目的过程中，没有遇到太多问题。想了解npm的小伙伴可以参考下面两篇文章：
主要回顾一下npm配置国内资源
npm是一个非常大的JavaScript包，但是在国外，所以由于网速的原因，我们使用npm进行安装的时候，有时会失败。
还好，淘宝做了一个npm的国内镜像。我们安装之后，使用cnpm install [xxx] 命令使用淘宝的镜像进行安装了。cnpm的安装和使用淘宝 NPM 镜像说的很清晰。
另一种方式是直接修改npm的配置项register，将npm所在的位置修改为淘宝的地址，Mac 的做法如下：在命令行中输入如下命令
cd ~ //进入根目录
atom .npmrc //用atom打开.npmrc文件
将.npmrc文件中的内容修改如下：
registry = https://registry.npm.taobao.org
这样我们使用 npm install [xxx] 就是从淘宝镜像进行安装了。
注：关于npm配置国内资源，慕课老师写了一篇文章，讲的很是明白使用 CNPM 进行 Ionic 环境的安装与配置
1.2 关于webpack
webpack是一个强大的模块打包机，本项目中使用了React和ES6的语法，所以使用webpack是非常合适的呢！
webpack的内容还是很多的，比如说配置文件webpack.config.js、loader的配置等等；我在学习webpack的过程中，还是花了很多力气的。想学习webpack的小伙伴，我推荐下面这篇文章（真心讲的很好）：
我们主要说说webpack的热加载的配置，这个功能真的很好用。
-
常规情况下，我们配置好
webpack.config.js文件之后，使用webpack命令进行打包，然后手动刷新页面。就是说，我们在编写代码的过程中，要不断的执行webpack命令，再手动刷新，才能看到效果。 -
还有一种厉害一点的方法，
webpack --watch命令来动态监听文件的改变并实时打包，输出新 bundle.js 文件，但是还是要我们手动进行刷新。 -
最厉害的就是热加载，
webpack-dev-server主要是启动了一个使用express的Http服务器 。它的作用主要是用来伺服资源文件 。此外这个Http服务器 和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件。-
首先安装
npm install webpack-dev-server -
终端输入命令
webpack-dev-server --inline
-
这样我们在浏览器输入 http://localhost:8080/ 就能看到我们编写的页面了，并能时时刷新。
需要注意的是：
-
webpack-dev-server并不能读取你的webpack.config.js的配置output，你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的，对webpack-dev-server并不起作用 -
webpack-dev-server打包生产的文件并不会添加在你的项目目录中。你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中，它默认打包的文件名是bundle.js。 -
因此在使用热加载时，我们引入的文件应该是
webpack-dev-server打包生产的文件(引用bundle.js文件需要直接引用根目录下面的！)<script type="text/javascript" src="bundle.js"></script>这样就能享受时时刷新的待遇啦！
2.框架
项目中使用AntDesign框架来书写样式，AntDesign框架的很多组件很好用，比如：Tabs、Form、Carousel、Modal、Menu、Button等；
AntDesign的 官网 是中文的，学习起来容易一些呢！
React项目的重点当然是React了，React的核心思想是数据驱动，我们从后台取到数据，再将取到的数据用 this.setState()进行保存，从而导致页面重新render。关于React我也在学习的过程中，下面的三篇文献是我最近正在学习的：
阮一峰大神曾说过：真正学会 React 是一个漫长的过程。
网友评论