关于webpack的使用方式的问题

自己刚开始接触webpack，在网上找到一些入门资料但是没有发现特别能解决自己疑惑的。

现在想请大家帮忙梳理下webpack的使用方式的问题。

我之前尝试的时候，就是写一个webpack.config.js配置文件，编辑好入口文件和loader，然后在命令行里面直接webpack一下，引用的时候直接引用导出的文件即可。

但是参考别人的项目，有的是这么写的:

/* eslint-disable no-console, no-use-before-define */

import path from 'path'
import Express from 'express'
import qs from 'qs'

import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import webpackConfig from '../webpack.config'

import React from 'react'
import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux'

import configureStore from '../common/store/configureStore'
import App from '../common/containers/App'
import { fetchCounter } from '../common/api/counter'

const app = new Express()
const port = 3000

// Use this middleware to set up hot module reloading via webpack.
const compiler = webpack(webpackConfig)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

// This is fired every time the server side receives a request
app.use(handleRender)

function handleRender(req, res) {
    //这里面是服务端渲染的代码
}

这样的意思是不是把webpack当作nodejs的中间件来处理了？

如果采用这种方式把HotMiddleware部分删掉，是不是也是只有在初次启动的时候才会转换，可以直接用在生产环境中嚒？

和之前自己上文提到的方式有什么差异嚒？

还是有点晕，感觉webpack的配置文件写起来还是有点麻烦，找来别人的例子看着费劲，如果有好心人帮忙也解释下下面的这个loader的写法就更好了:

loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        include: __dirname,
        query: {
          optional: [ 'runtime' ],
          stage: 2,
          env: {
            development: {
              plugins: [
                'react-transform'
              ],
              extra: {
                'react-transform': {
                  transforms: [
                    {
                      transform:  'react-transform-hmr',
                      imports: [ 'react' ],
                      locals:  [ 'module' ]
                    }
                  ]
                }
              }
            }
          }
        }
      }
    ]

谢谢

node.js webpack javascript

阅读 4k

5 个回答

bounty

✓ 已被采纳

webpack-hot-middleware是做热加载用的，webpack-dev-middleware是存储静态资源的，你这种方式一般都是开发环境用的，正式环境建议打包文件

jinmmd

400145

发布于
2017-01-22

更新于
2017-01-23

我最近也刚开始学习webpack，是个前端新手，试着回答下loader写法的部分吧，希望能一起交流进步。

loaders: [
      {
        test: /\.js$/, // 对.js结尾的文件起作用
        loader: 'babel', // 使用babel作为loader
        exclude: /node_modules/, // 不对/node_modules/目录下的文件起作用
        include: __dirname, // 只对当前目录下的文件做处理
        query: { // 传给loader的参数
          optional: [ 'runtime' ], // 开启runtime模式
          stage: 2, // 不同阶段语法提案的转码规则(0-3), 2代表草案阶段
          env: {
            development: { // 开发环境配置
              plugins: [
                'react-transform'
              ],
              extra: { // 额外情况, 'react-transform'不正常, 就用'react-transform-hmr'代替
                'react-transform': {
                  transforms: [
                    {
                      transform:  'react-transform-hmr',
                      imports: [ 'react' ],
                      locals:  [ 'module' ]
                    }
                  ]
                }
              }
            }
          }
        }
      }
    ]

语法提案的批准流程
 babel transform-runtime

另外，你贴的别人项目写的webpack有点复杂，感觉是为了模块化使用之类的，我也不是很懂。