Question

我可以得到一些帮助吗？我希望项目中的所有文件自动触发一个新的bundle.js。 modules目录中的文件可以执行此操作。但是partials目录中的文件没有。

文件结构如下图所示。

对文件的更改Home.js会触发一个新的包。但是，如果没有服务器重启，对Main.js的更改就不会发生。 Home.js是Main.js的依赖

Main.js

import React, { Component } from 'react'  
import Home from '../Home.js'
export default class Main extends Component{  
  render(){  
    return(  
      '<'Home/'>' 
    )
  }
}

Webpack配置：

var webpack = require('webpack')

module.exports = {
devServer: {     
  port: 8080 
},   
entry: './index.js', 
output: {
  path: 'public',
  filename: 'bundle.js',
  publicPath: '/'   
}, 
plugins: process.env.NODE_ENV === 'production' ? [
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin()   ] : [],
module: {
  loaders: [
   { test: /\.jpg$/, loader: 'file' },
   { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }, 
   { test: /\.css/, loaders: ['style', 'css'],
   include: __dirname + '/public' }
 ]   } }

Answer 1

您没有添加resolving函数，这是在代码中使用import和require引用所必需的。我认为你的加载器中存在一些语法错误。替换这两件事，我认为它会起作用。

Resolve用于查找“import”和“require”引用在当前路径中立即可用。例如：如何调用 require（“../ homepage”）可能被翻译成（“../homepage/index.js”）或者，如果您的“反应”可能会解释导入对“反应”的反应 node_modules文件夹以其他名称命名。

resolve: {
    extensions: ['', '.js', '.jsx']
}

<强>装载机：

{
   test: /\.js[x]?$/,
   loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
   exclude: /(node_modules|bower_components)/
}

应用于您的配置：

var webpack = require('webpack')

const TARGET = process.env.npm_lifecycle_event;

module.exports = {
    devServer: {
        port: 8080
    },
    context: __dirname,
    entry: './index.js',
    output: {
        path: 'public',
        filename: 'bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: TARGET === 'production' ? [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()] : [],
    module: {
        loaders: [
            {test: /\.jpg$/, loader: 'file'},
            {
                test: /\.js[x]?$/,
                loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.css/, loaders: ['style', 'css'],
                include: __dirname + '/public'
            }
        ]
    }
};

Webpack不会在不重新启动服务器的情况下将更改捆绑到某些文件

1 个答案: