webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)

1、首先是目录结构

|-node_modules/                  #包文件
|-build/                         #静态资源生成目录
|-src/                           #开发目录
    |-js/
        |-index.js               #入口文件
        |-app.js                 #React组件文件
    |-css/
        |-style.scss             #SASS样式文件
|-webpack.config.js              #webpack开发配置文件
|-index.html
|-package.json

2、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端口
    }
}

3、最后是我的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"
  }
}