[关闭]
@1234567890 2017-05-22T13:29:17.000000Z 字数 7237 阅读 1636

react + webpack + ant开发准备

react

开发目录

  1. ├── src                 #开发目录
  2. |   ├──assets           #存放静态资源
  3. |   |   ├──datas        #存放数据 json 文件
  4. |   |   ├──images       #存放图片资源文件
  5. |   |   └──styles       #存放全局css变量文件和reset文件
  6. |   ├──lib
  7. |   |   ├──components   #存放数据 模块组件 文件
  8. |   |   |   └──Header
  9. |   |   |       ├──Header.js
  10. |   |   |       └──Header.css
  11. |   |   |       
  12. |   |   └──utils        #存放utils工具函数文件
  13. |   |
  14. |   └──views
  15. |       ├──Index        #入口文件
  16. |       |   ├──Index.html #html文件
  17. |       |   ├──Index.js
  18. |       |   └──Index.css
  19. |       └──Index2
  20. ├── dist                #发布目录
  21. ├── node_modules        #包文件夹
  22. ├── .gitignore     
  23. ├── .balbelrc    
  24. ├── webpack.config.js   #webpack配置文件
  25. └── package.json

准备组件

安装react/antd

  1. npm install react react-dom antd --save

安装webpack

  1. npm install webpack less webpack-dev-server --save-dev

安装babel-loader以及其他相关package

  1. npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-1 --save-dev

安装style-loader/css-loader等

  1. npm install style-loader css-loader less-loader url-loader file-loader --save-dev

安装插件

  1. npm install path fs extract-text-webpack-plugin@^2.0.0-rc.3 html-webpack-plugin --save-dev

配置webpack.config.js

  1. //分离css
  2. let ExtractTextPlugin = require("extract-text-webpack-plugin");
  3. //模版
  4. var HtmlWebpackPlugin = require('html-webpack-plugin');
  5. let path = require('path');
  6. let webpack = require('webpack');
  7. let fs = require('fs');
  8. //输出路径
  9. let outputDir = path.resolve(__dirname, './dist');
  10. //入口
  11. let entryPath = './src/views';
  13. //多文件入口
  14. let entris = fs.readdirSync(entryPath).reduce(function (o, filename) {
  15.     !/\./.test(filename) &&
  16.     (o[filename] = './' + path.join(entryPath, filename, filename + '.js'));
  17.     return o;
  18.   }, {}
  19. );
  21. module.exports={
  22.   entry:entris,
  23.   output: {
  24.     path: outputDir,
  25.     filename: 'js/[name].bundle.js',
  26.     publicPath: '/dist/'
  27.   },
  28.   //源码调试
  29.   devtool:'source-map',
  30.   module:{
  31.     loaders:[
  32.       {test: /\.css$/,loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'})},
  33.       {test: /\.less$/,loader: 'style-loader!css-loader!less-loader'},
  34.       {test:/\.js$/,loader:'react-hot-loader!babel-loader',exclude:/node_modules/},
  35.       {
  36.         test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
  37.         loader: 'url-loader?limit=10240&name=images/[name]-[hash:8].[ext]!image-webpack-loader',
  38.       }
  39.     ]
  40.   },
  41.   plugins: [
  42.         new ExtractTextPlugin("css/[name].bundle.css"),
  43.         new webpack.optimize.CommonsChunkPlugin({
  44.             name: "commons",
  45.             filename: "js/commons.bundle.js"
  46.         }),
  47.         new HtmlWebpackPlugin({
  48.                 inject: 'body',
  49.                 filename: '../cart.htm',
  50.                 template: 'template.html',
  51.                 chunks: ['Loading']
  52.         })
  53.   ]
  55. }

coding地址
学习参考

Webpack配置示例和详细说明

  1. /*
  2.  * 请使用最新版本nodejs
  3.  * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本。
  4.  * 也可以使用 webpack -d -w 命令,生成用于开发调试的代码。
  5.  * 通常开发使用 node server.dev.js 命令 , server.dev.js基于此配置做了特殊处理, 
  6. 主要是为了自动刷新和热更新, 这个服务只是在内存中生成缓存文件,不会在硬盘中生成文件。
  7.  * webpack配置,如果出现问题,通常都是路径问题造成的
  8.  *
  9.  * 常用命令看package.json中配置的scripts,比如
  10.  * "scripts": {
  11.  * "d": "node server.dev.js",
  12.  * "reset:dist": "rm -fr dist && mkdir -p dist/build && cp -r src/lib dist",
  13.  * "p": "npm run reset:dist && 
  14.      ./node_modules/.bin/webpack -p --display-error-details --progress --colors"
  15.  * }
  16.  */
  19. //导入Node.js的path模块,主要用来转换成绝对路径,比如path.resolve(__dirname, 'build')
  20. const path = require('path');
  22. //导入webpack整个模块
  23. //也可以不导入webpack整个模块,而值导入用到的内置插件模块
  24. //比如 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin")
  25. //这样后面使用方式为 new CommonsChunkPlugin
  26. //否则为new webpack.optimize.CommonsChunkPlugin
  27. const webpack = require('webpack');
  29. //导入ExtractTextPlugin插件,作用提取代码中的css生成独立的CSS文件
  30. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  32. //导入HtmlWebpackPlugin插件,作用按需求生成html页面,想用好,挺麻烦的,可以不用
  33. const HtmlWebpackPlugin = require('html-webpack-plugin');
  35. //打包配置 webpack配置,多数同时支持String, Array or Object的写法。
  36. 单字符串的形式用于简单情况,key-value对象的形式用于复杂情况。
  37. const config = {
  39.     // 入口文件配置,打包输出的来源
  40.     // 多种写法 
  41.      entry:'entry.js' 
  42.      entry:{entry1:'entry1.js'}
  43.      entry:{entry1:['entry1a.js', ...]}
  44.      etc.
  45.     // 通常用path.resolve(__dirname, 'src/entry.js')转换成绝对路径,
  46.        也可以使用相对路径,比如 './src/entry.js'
  47.     entry: {
  48.         index: [path.resolve(__dirname, 'src/index.js')],
  49.         edit: [path.resolve(__dirname, 'src/edit.js')]
  50.     },
  52.     //输出配置
  53.     //path 输出目录 通常用path.resolve(__dirname, 'build')转换成绝对路径,
  54.       也可以使用相对路径,比如 './build'
  55.     //publicPath 开发代码中url的转换拼接处理,通常是代码中各种资源的地址,
  56.       比如图片等, url目录前缀或完整网址url前缀'http://cdn.com/'
  57.     //filename 输出js文件名,[name]对应entry对象键名,
  58.       也可以指定名字,加上id和hash可以避免缓存问题，
  59.       webpack会用实际值替换类似[hash]这样字符串
  60.     output: {
  61.         path: path.resolve(__dirname, 'dist/build'),
  62.         publicPath: './build/',
  63.         filename: '[name].[id].[hash].js',
  65.     },
  66.     //路径解析配置
  67.     resolve: {
  68.         //自行补全路径中文件的后缀, 第一个是空字符串，对应不需要后缀的情况
  69.         extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
  70.     },
  72.     //模块
  73.     module: {
  74.         //loaders: 加载器
  75.         // [
  76.         //     {
  77.         //         test:正则表达式,匹配的文件名则使用这个加载器。
  78.         //         include: 匹配的目录则进一步处理
  79.         //         exclude: 匹配的目录则排除
  80.         //         loader: `!`用于分隔loader 字符串形式,作用和数组形式一样
  81.         //         loaders: ['loader',...] 数组形式,作用和字符串形式一样
  82.         //     }
  83.         // ]
  84.         //
  85.         // 如果同一文件需要多个loaders处理,
  86.            也就是使用loaders: ['loader',...] 数组形式,
  87.            loader的参数不能使用query:{}写法了。只能用拼接字符串写法。
  88.         loaders: [
  89.             {
  90.                 //加载css资源,默认写法loader:'style-loader!css-loader'
  91.                   css为Internal内部形式
  92.                 //ExtractTextPlugin插件写法用于生成独立的css文件,
  93.                   用于external link形式
  94.                 //生成的独立CSS文件中的url图片地址的publicPath,
  95.                   通常JS中的publicPath不一样,如果一样可以不设置
  96.                 test: /\.css$/,
  97.                 loader: ExtractTextPlugin.extract(
  98.                     'style-loader',
  99.                     'css-loader',
  100.                     {
  101.                         publicPath: "./"
  102.                     }
  103.                 )
  104.             },
  105.             {
  106.                 //url-loader处理图片URL,
  107.                 如果图片小于limit值直接生成`base64` 格式的`dataUrl`,
  108.                  否则输出图片,name参数指定输出目录和图片名
  109.                 //url-loader依赖file-loader
  110.                 //image-webpack-loader是用来压缩图片的,主要是透明PNG
  111.                 test: /\.(jpe?g|png|gif|svg)$/i,
  112.                 loaders: [
  113.                     'url-loader?limit=8192&name=img/[name].[hash].[ext]',
  114.                     'image-webpack-loader?{
  115.                           progressive:true, 
  116.                           optimizationLevel: 7,
  117.                           interlaced: false,
  118.                           pngquant:{
  119.                                   quality: "65-90",
  120.                                   speed: 4
  121.                                    }
  122.                      }'
  123.                 ]
  124.             },
  125.             {
  126.                 //用babel转码器加载有es2015和jsx语法的js,输出为es5语法的js,
  127.                   注意这里只是语法转码。
  128.                 //如果开发代码中有用到新ES规范中的新对象
  129.                    或属性方法还需要babel-polyfill
  130.                    才能转码成ES5代码
  131.                 //class-properties和object-rest-spread,是转码类属性写法和非数组对象
  132.                    的延展符...,新React常用到的写法,但还不是ES2015规范
  133.                 //query对象和.babelrc配置文件内容一致,必须都写,
  134.                    不然使用webpack的babel-loader会报错.
  135.                 test: /\.jsx?$/,
  136.                 exclude: /(node_modules|lib)/,
  137.                 loader: 'babel-loader',
  138.                 query: {
  139.                     presets: ['es2015', 'react'],
  140.                     plugins: [
  141.                           'transform-class-properties',
  142.                           'transform-object-rest-spread'
  143.                     ]
  144.                 }
  145.             }
  147.         ]
  148.     },
  150.     //script引入js类库，通过require或import的方式来使用，
  151.       却不希望webpack把它编译到输出文件中。
  152.     //比如不想这么用 const $ = window.jQuery 
  153.       而是这么用 const $ = require("jquery") or import $ from "jquery";
  154.       则配置"jquery": "jQuery"
  155.     //键名是require或from时的字符串,键值是js内的全局变量名
  156.     externals: {
  157.         'react': 'React',
  158.         'react-dom': 'ReactDOM',
  159.         'baidu-hmt': 'window._hmt',
  160.         'lrz': 'lrz',
  161.         'iscroll': 'IScroll',
  162.         'zepto': 'Zepto',
  163.         'fabric': 'fabric',
  164.         'react-slick': 'Slider'
  165.     },
  167.     plugins: [
  168.         //输出独立的css文件,用于external link形式,
  169.           如果有多个入口JS共用的CSS,会生成commons.css
  170.         new ExtractTextPlugin('[name].[id].[hash].css'),
  172.         //把entry中配置的多个js中共用代码提取生成为单个js, 
  173.        多参数写法 new webpack.optimize.CommonsChunkPlugin("commons", "commons.js")
  174.         new webpack.optimize.CommonsChunkPlugin({
  175.             name: "commons",
  176.             filename: "commons.[id].[hash].js"
  177.         }),
  179.         //按需求生成HTML页面
  180.         //template 模板位置
  181.         //inject: 'body' js插入在body元素内部的最后
  182.         //chunks 对应入口文件名
  183.         //filename 生成的文件名,可以带上路径
  184.         //options参数对象的值可以自定义,比如这里的libJS
  185.         //在模板页中可以获得和使用这些数据,
  186.          可以在模板页中使用<%= JSON.stringify(htmlWebpackPlugin) %>;
  187.          输出查看所有可用的数据
  188.         new HtmlWebpackPlugin({
  189.             template: 'src/template.html',
  190.             inject: 'body',
  191.             chunks: ['commons', 'index'],
  192.             filename: '../index.html',
  193.             title: '最美奥运脸',
  194.             libJS: [
  195.                 //上拉下拉
  196.                 './lib/js/iscroll-lite.min.js'
  197.             ]
  198.         }),
  199.         new HtmlWebpackPlugin({
  200.             template: 'src/template.html',
  201.             inject: 'body',
  202.             chunks: ['commons', 'edit'],
  203.             filename: '../edit.html',
  204.             title: '最美奥运脸',
  205.             libJS: [
  206.                 //切换左右拖动
  207.                 './lib/js/react-slick.min.js',
  208.                 //编辑图片
  209.                 './lib/js/fabric.min.js'
  210.             ]
  211.         })
  213.         //ProvidePlugin的作用就是在开发代码内不需要require('react')
  214.           或import ... from ... 也能使用React
  215.         // ,new webpack.ProvidePlugin({
  216.         //     React: 'react',
  217.         //     ReactDOM: 'react-dom'
  218.         // })
  220.         //压缩代码,命令行的 webpack -p 会默认使用这个插件压缩代码
  221.         // ,new webpack.optimize.UglifyJsPlugin({
  222.         //     compress: {
  223.         //         warnings: false
  224.         //     }
  225.         // })
  227.     ]
  229.     //webpack-dev-server的配置, 通常弄成独立的文件,比如server.js,
  230.     //或者使用命令行形式,比如npm scripts命令行形式,
  231.       类似webpack-dev-server -d --inline --hot
  232.     //弄webpack-dev-server通常是为了自动刷新和热更新,配置麻烦
  233.     // devServer: {
  234.     //     contentBase: './',
  235.     //     host: 'h5.baofeng.com',
  236.     //     port: 9090, //默认8080
  237.     //     inline: true //监控文件变化,自动重加载整个页面
  238.     // }
  240. };
  242. // babel-polyfill用来转换ES2015新的对象和方法,在入口数组中,
  243.    babel-polyfill必须在入口文件字符串前面,
  244.    并且必须在入口文件代码的第一行import或require 'babel-polyfill'
  245. for (let prop in config.entry) {
  246.     config.entry[prop].unshift(
  247.         'babel-polyfill'
  248.     );
  249. }
  251. module.exports = config;
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注