webpack配置（react)版本

建立文件webpack.config.js

1.配置入口和出口：并安装webpack 包  

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    }}

2.配置js文件

在output后面加：

module: {
    rules: [
        //js,react
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env','react']
                }
            }
        }}

安装下面的包:

"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",

3.配置html插件

在module后面加：本身编译后能生成一个html文件，如果想用自己的html模版，则自己建立一个index.html文件，并引入这个插件

安装插件：  "html-webpack-plugin": "2.30.1",

配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
    template:'./src/index.html',
})],

4.配置样式

安装 "css-loader": "0.28.8"，"style-loader": "0.19.1"

但是这样css文件没有被分离出来，还需要安装

 "extract-text-webpack-plugin": "3.0.2"；  解析出来的scss才能是单独的文件

配置：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
    })
},

plugins: [
    new ExtractTextPlugin("index.css")]

   如果是scss文件，

安装：

 "sass-loader": "4.0.0", "node-sass": "4.7.2",

配置：

{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader",'sass-loader']
    })
},

5.配置图片文件

安装："file-loader": "1.1.6",url-loader": "0.6.2"

配置：

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192,
            }
        }
    ]
},

6.配置字体文件（font-awesome）

配置：

{
    test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192,
            }
        }
    ]
}

7.安装webpack-dev-server包，实现自动刷新

配置：改端口号

devServer: {
  port:'8086'
},

8.如果需要生成的html,css,js各自放在单独的文件里：则需要配置引入插件

const webpack=require('webpack');

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "common",
        filename: "base.js",
    }),
],

并修改一些路径地方：

完整的webpack.config.js

const path = require('path');
const webpack=require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/dist/",//改，为了让生成的html里引入的css，js路径是对的
        filename: 'js/index.js'//改

    },
    module: {
        rules: [
            //js,react
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react']
                    }
                }
            },
            //样式css
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader",'sass-loader']
                })
            },
            //图片
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name:'resource/[name].[ext]'//改

                        }
                    }
                ]
            },
            //字体
            {
                test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name:'resource/[name].[ext]'//改
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template:'./src/index.html',
    }),
        new ExtractTextPlugin("css/index.css"),//改

        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            filename: "base.js",
        }),
    ],
      devServer: {
        port:'8086'
      },


};

package.json:

{
  "name": "react-happy-gloria",
  "version": "1.0.0",
  "description": "react try",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server",//自己配的
    "dist":"webpack"//自己配的

  },
  "repository": {
    "type": "git",
    "url": "http://gitlab.ximalaya.com/gloria.hu/react-happy-gloria.git"
  },
  "author": "gloria.hu",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.8",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "4.7.2",
    "sass-loader": "4.0.0",
    "style-loader": "0.19.1",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}