javascript - 关于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' ]
                    }
                  ]
                }
              }
            }
          }
        }
      }
    ]

谢谢

解决方案

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

这篇关于javascript - 关于webpack的使用方式的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！