webpack+react使用工具配置

1、下载webpack 工具

npm install -g webpack                                       #webpack的cil环境
npm install -g webpack-dev-server                    #webpack自带的服务器

2、各种依赖库————项目本地下载

# webpack 本身

npm install webpack -D                                       #webpack本地依赖库
npm install webpack-dev-server -D                     #webpack服务器的本地依赖

#babel相关库

npm install  babel-core -D                                   #后台编译babel工具
npm install babel-preset-es2015 -D                     #babel对ES2015的预设
npm install babel-loader -D                                  #babel加载器
npm install babel-preset-react -D                         #babel对react的预设

#react相关

npm install react -D                                               #react 本身
npm install react-dom -D                                       #react-dom 本身
npm instakk react-hot-loader -D                            #react 热更新

#优化相关

npm install style-loader -D
npm install css-loader

3、编写webpack配置相关文件

/**
 * Created by Administrator on 2017/6/16.
 * webpack配置文件
 */
module.exports = {
    entry: './index.js',//入口点
    output: { //输出到哪
        path: __dirname, //编译后的地址 推荐用变量
        filename: 'bundle.js'//编译后文件的名称
    },
    devtool: 'source-map', //开发工具
    module: { //用到哪些模块
        loaders: [//指定loader
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },//如果文件结尾是.css，则使用style-loader作为css打包器
            {
                test: /\.js$/,
                loader: 'react-hot-loader!babel-loader',
                exclude:/node_modules/
            }//如果文件结尾是.js，则使用react-hot-loader作为js打包器，但是，node_modules问价夹里的js不需要动。
        ]
    }
};

4、配置babel预设文件——  .baberc文件，

// babel所需文件 ,配置babel里的preset
{
    presets: [
        ['es2015'],
        ['react']
    ]
}

欢迎分享本文，转载请保留出处：前端ABC » webpack+react使用工具配置