javascript - 关于webpack的使用方式的问题
阿神
阿神 2017-04-11 11:45:08
[JavaScript讨论组]

自己刚开始接触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' ]
                    }
                  ]
                }
              }
            }
          }
        }
      }
    ]

谢谢

阿神
阿神

闭关修行中......

全部回复(5)
伊谢尔伦

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

黄舟

我最近也刚开始学习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有点复杂,感觉是为了模块化使用之类的,我也不是很懂。

PHP中文网

WebPack最全教程

伊谢尔伦

看了下你贴的代码,应该是做后端渲染,并且在node做hot reaload,至于loader可以看@jinmmd的回答,也可以看看官方文档嘛,我觉得最好先过一遍官方文档,这样看别人的配置文件的时候会轻松一点

巴扎黑

第一个服务端热加载而已

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号