webpack基本配置

var webpack = require('webpack')
module.exports = {
    entry: {
        index: './src/app.js'
    },
    output: {
        path: './dist/',
        filename: '[name].js',
        publicPath: '/dist'
    },
    scripts: {
      "build": "webpack",
      "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'stage-0', 'react']
            }
        }]
    }
}

dev里各属性值的意思是:

  1. webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器
  2. --devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
  3. --progress: 显示合并代码进度
  4. --colors: 在命令行中显示颜色
  5. --content-base build:指向设置的输出目录

注:
publicPath: ‘/dist’
// webpack-dev-server 启动目录是 `/`, `/dist` 目录是打包的目标目录相对于启动目录的路径

webpack-dev-server 还提供了自动刷新功能,有两种模式。

Iframe 模式

修改访问的路径: http://localhost:8080/index.html -> http://localhost:8080/webpack-dev-server/index.html 。这个时候每次修改代码,打包完成过后都会自动刷新页面。

不需要额外配置,只用修改路径
应用被嵌入了一个 iframe 内部,页面顶部可以展示打包进度信息
因为 iframe 的关系,如果应用有多个页面,无法看到当前应用的 url 信息

inline 模式

启动 webpack-dev-server 的时候添加 –inline 参数

需要添加 –inline 配置参数
没有顶部信息提示条,提示信息在控制台中展现

参考:
React+Webpack快速上手指南
精益react-webpack