webpack 配置 (支持 React SCSS ES6 編譯打包 和 模塊熱更新 / 生成SourceMap)

一、首先是目錄結構

|-node_modules/                  #包文件
|-build/                         #靜態資源生成目錄
|-src/                           #開發目錄
    |-js/
        |-index.js               #入口文件
        |-app.js                 #React組件文件
    |-css/
        |-style.scss             #SASS樣式文件
|-webpack.config.js              #webpack開發配置文件
|-index.html
|-package.json

二、webpack配置文件 !important

• entry 入口文件地址:

entry:{
    build:"./src/js/index.js"
}

入口文件用來引用其餘依賴,最終webpack會把全部依賴打包輸出;
入口文件index.js相似這樣:

import React, { Component, PropTypes, cloneElement } from 'react';
import ReactDOM from 'react-dom';
import styles from '../css/style.scss';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

起初沒有index.js,入口文件爲app.js;
app.js最後末尾執行ReactDOM.render,App組件不做爲模塊輸出export, 這樣作修改app.js會刷新整個頁面,app.js沒法進行模塊熱更新;
最終改成app.js做爲模塊輸出export,用index.js做爲入口文件,執行ReactDOM.render渲染DOM.

• output 輸出目錄

path:打包輸出目錄

filename:
打包輸出的文件名 
具體文件名xxx.js或[name].js
[name]爲入口entry對象中KEY值 build

publicPath:主要是用在webpack-dev-server,設置bundle的生成路徑

publicPath:'/bundle/'
在使用webpack-dev-server時,
index.html中經過<script src="/bundle/build.js"></script>引用bundle

• module.loaders 設置各類webpack loader

module:{
   loaders:{   
            //文件名匹配成功的文件-->執行loaders
            test: /\.jsx?$/, 
            //設置路徑範圍
            include: [
            path.resolve(__dirname, './src/js'),
            ],
            //須要執行的loaders
                loaders: ['react-hot', 'babel'],
            }
}

編譯打包React ES6 須要用到react-hot-loader babel-loader
編譯打包SCSS css 須要用到style-loader css-loader sass-loader
以 loaders: ['react-hot', 'babel'] 爲例
loaders的執行順序是從右到左:先babel編譯,而後執行react-hot模塊熱更新

• resolve 設置模塊擴展名,和依賴的路徑

不設置擴展名如'.jsx', 在引入模塊時會找不到.jsx文件致使報錯

resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react'),
    },
    extensions: ['', '.js', '.jsx', '.scss', '.css'],
},

• devServer : WDS服務器相關配置

devServer:{
    historyApiFallback:true,
    hot:true, //熱更新
    inline:true, //熱更新inline模式
    progress:true,
    port:8888 //設置webpack-dev-server端口
}

• devtool : 設置SourceMap的生成模式

webpack 有多種SourceMap生成模式
推薦使用cheap-module-eval-source-map

devtool: 'cheap-module-eval-source-map'

完整webpack配置文件 webpack.config.js

let path = require('path');
let webpack = require('webpack');
let sassLoader = 'style!css!sass?sourceMap=true&sourceMapContents=true';
module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry:{
        build:"./src/js/index.js"
    },
    output:{
        path: path.resolve(__dirname,"./build"),
        filename:"build.js",
        publicPath: '/bundle/',
    },
    module:{
        loaders:[
            {
                test: /\.jsx?$/i, 
                include: [
                    path.resolve(__dirname, './src/js'),
                ],
                loaders: ['react-hot', 'babel'],
            },
            {
                test: /\.scss$/i,
                include: [
                path.resolve(__dirname, './src/css'),
                ],
                loader: sassLoader
            }
        ]
    },  
    resolve: {
        alias: {
          'react': path.join(__dirname, 'node_modules', 'react'),
        },
        extensions: ['', '.js', '.jsx', '.scss', '.css'],
    },
    devServer:{
        historyApiFallback:true,
        hot:true,
        inline:true,
        progress:true,
        port:8888 //webpack-dev-server端口
    }
}

三、最後是個人package.json文件

{
  "name": "moudel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.cofing.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "bd": "webpack",
    "min": "webpack -p",
    "watch": "webpack --watch",
    "hot": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "async-each": "^1.0.1",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "chalk": "^1.1.3",
    "classnames": "^2.2.5",
    "css-loader": "^0.26.1",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.24.1",
    "lodash.clonedeep": "^4.5.0",
    "node-sass": "^3.13.0",
    "react": "^15.4.1",
    "react-hot-loader": "^1.3.1",
    "react-transform-catch-errors": "^1.0.2",
    "redbox-react": "^1.3.3",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.13.2"
  },
  "dependencies": {
    "react-dom": "^15.4.1",
    "react-redux": "^4.4.6",
    "react-router": "^3.0.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0"
  }
}