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"
  }
}