用webpack来构建react-antd开发环境

【首先安装 nodejs】
下载zip包，解压，然后把bin目录加入 path里面，ok
设置仓库地址，防止被墙
npm config set registry "http://registry.npm.taobao.org"
npm config list //可以查看配置
////////////////////////////////////

【接着开始环境构建】
mkdir d:/antd_1/mydemo3
cd d:/antd_1/mydemo3

安装 webpack
cd d:/antd_1/mydemo3
npm init //自定义创建package.json
// or
npm init -yes //可以创建默认的package.json

// 局部安装 webpack
npm install webpack --save-dev

// 安装React,--save 命令用于将包添加至 package.json 文件,执行命令:
npm install react react-dom --save-dev

// 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到自动刷新的效果。
安装webpack-dev-server执行命令:
npm install webpack-dev-server --save-dev

在package.json文件中为scripts添加,方便使用命令:

"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

这里的命令是webpack,如果需要压缩编译的话,将webpack改成webpack -p

代码编译结束:
1.根目录下执行命令 (开发时)
npm run dev
2.浏览器直接访问:
http://localhost:8181/index.html

3,打包
npm run build
然后把build 目录拷贝走就好了

另外，每次修改文件，都会实时的更新到浏览器里面.

接着添加antd 组件
npm install antd --save-dev
添加其他装载器
npm install style-loader css-loader url-loader file-loader less less-loader --save-dev
添加按需加载插件(如果不安装，下面使用会提示)
npm install babel-plugin-import --save-dev // 此插件安装前，必须先安装 file-loader
npm install babel-plugin-transform-runtime --save-dev
在 webpack.config.js 里面配置相应的 loader

【备注】
还可以提取公共代码用插件 CommonsChunkPlugin -- 待测试
还可以css单独提取出来成为一个独立的文件用插件 extract-text-webpack-plugin
///// 下面这个链接详细讲解了 url-loader的用法和注意事项，特别提到 react中引用图片的打包方式 -- 待测试
webpack踩坑之路 (2)——图片的路径与打包
http://www.cnblogs.com/ghost-xyx/p/5812902.html
//// css 预处理器 loader 还没试 less loader sass loader styles loader
//// BannerPlugin 插件给输出的文件头添加注释
//// react webpack打包体积优化 -- 待测试
http://blog.csdn.net/code_for_free/article/details/51583737
//// 引入 andt 组件时，提示要按需来加载资源，要用
https://www.npmjs.com/package/babel-plugin-import 来加载组件，避免文件太大
https://github.com/ant-design/babel-plugin-import 具体用法参考
具体 webpack.config.js文件有2中写法，如果展示时没有样式，就是黄色部分造成的：
1，exclude 被过滤掉了，导致样式不能按需加载
2，style 引用错了，这里必须写 css，否则也会被过滤掉样式.

整个 webpack.config.js文件内容：

/**
 * 测试环境用
 */
'use strict';

var path = require('path');
var webpack = require('webpack');
module.exports = {
    //devtool: 'eval-source-map',// 如果出错，可以知道源文件的位置 -- 这个会使得编译后的js文件变大

    entry: ['webpack/hot/dev-server',path.resolve(__dirname,'./app/main.js')],output: {
        path: path.resolve(__dirname,'./build'),filename: 'bundle.js'
    },devServer: {
        inline: true,// 实时刷新
        historyApiFallback: true,//不跳转
        port: 8181
    },module: {
        loaders: [
            {
      				test:/\.css$/,//exclude:/node_modules/,// 这里千万要注意了，按需加载时，没有样式，这里弄的
      				loader:"style-loader!css-loader"
      			},{
                test: /\.js?$/,exclude: /(node_modules|bower_components)/,loader: 'babel-loader',query: {
                    presets: ['es2015','react'],plugins: ['transform-runtime',['import',{
                      libraryName: 'antd',style: 'css' // or true or css 这里必须是 css，否则样式不能加载
                    }]]
                }
            }
        ]
    },plugins: [
      new webpack.LoaderOptionsPlugin({
          // test: /\.xxx$/,// may apply this only f
          options: {
            // babel: {
            //     //presets: ['es2015','stage-0',//     plugins: ['transform-runtime',{
            //       libraryName: 'antd',//       style: 'true' // or true
            //     }]]
            // }
          }
        }),new webpack.BannerPlugin('文件头注释写这里吧!'),new webpack.optimize.UglifyJsPlugin({
    			compress:{
    				warnings:true
    			},output:{
    				comments:true
    			}
    		}),new webpack.DefinePlugin({
          'process.env': {
              NODE_ENV: '"production"'
          }
        }),new webpack.HotModuleReplacementPlugin()
    ]
};

参考：
http://www.jb51.cc/article/p-hfezunlw-mz.html
https://github.com/ant-design/babel-plugin-import

用webpack来构建react-antd开发环境

相关推荐