react中webpack配置

一、安装

1.npm install webpack -g（以命令行工具的形式使用webpack时，在全局安装webpack）

2.npm install webpack --save-dev（编写自己的构建脚本，或由项目指定需要依赖的webpack，本地安装，webpack只是构建工具的角色，应该安装在dev－dependencies中）

3.npm install babel-core babel-loader --save-dev（添加加载器，将进行解析，以便浏览器使用.jsx和.scss等文件）

二、webpack文件

var path = require('path');// 用于拼接路径

module.exports = {

 entry: path.resolve(__dirname, 'index.jsx'),// 指定项目入口

    // webpack打包后的js文件路径及名称

    output: {

        path: path.resolve(__dirname, 'build'),// 输出路径

        filename: '/js/[name].[chunkhash:8].js' // 输出的文件名

    },

    // 配置模块使用的加载器

    module: {

        loaders: [

        {

            // 假设我们拥有一个编译sass加载器

            // 匹配字符串

            test:/\.scss$/,

            // 使用的加载器，不可以省略加载器的后缀-loader

            loaders:['style-loader', 'css-loader', 'sass-loader']

        },

        {

            test:/\.jsx?$/,

            loaders: ['babel-loader']

        }

    },

    //配置webpack需要依赖的插件的地方

    plugins: [

        new HtmlWebPackPlugin({

              template: "./src/index.html",//可以设置已哪个html文件为模版

              filename: "./index.html"//可以设置html输出的路径和文件名

        }),

        new webpack.DefinePlugin({//最小化压缩 React

              'process.env':{

                'NODE_ENV': JSON.stringify(process.env.NODE_ENV)

              }

        }),

    ]

}

三、webpack配置中将将路径改为相对路径'./'

如何使用@去取代相对路径呢？

alias: {

  'react-native': 'react-native-web',

  '@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理},

在alias里面加入 '@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理