IT博客汇 | webpack基本配置

webpack基本配置

admin发表于 2016-11-22 06:18:50

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里各属性值的意思是：

webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器
--devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress: 显示合并代码进度
--colors: 在命令行中显示颜色
--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

Feed enhanced by Better Feed from Ozh