Javascript 网页包不'；t在不重新启动服务器的情况下捆绑对某些文件的更改

我能得到一些帮助吗？我希望我的项目中的所有文件自动触发一个新bundle.js。模块目录中的文件可以执行此操作。但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/'>' 
    )
  }
}

您没有添加在代码中使用

import

和

require

引用所必需的函数。我认为你的加载器有一些语法错误。换掉这两样东西，我想它会起作用的

“解析”用于查找不匹配的“导入”和“需要”引用 在当前路径中立即可用。例如：如何呼叫 require（“../homepage”）可能被翻译成（“../homepage/index.js”） 或者，如果您的 节点\u模块文件夹名为其他名称

装载机：

{
   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'
            }
        ]
    }
};

应用于您的配置：

{
   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'
            }
        ]
    }
};

您没有添加在代码中使用

import

和

require

引用所必需的函数。我认为你的加载器有一些语法错误。换掉这两样东西，我想它会起作用的

“解析”用于查找不匹配的“导入”和“需要”引用 在当前路径中立即可用。例如：如何呼叫 require（“../homepage”）可能被翻译成（“../homepage/index.js”） 或者，如果您的 节点\u模块文件夹名为其他名称

装载机：

{
   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'
            }
        ]
    }
};

应用于您的配置：

{
   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'
            }
        ]
    }
};

---

谢谢你的帮助-我做了这些改变，没有得到任何改善。还有其他想法吗？我得到了错误：“进程”和“目录名”没有定义。不知道这是否意味着什么。components目录中的所有内容都正常工作。Components是根目录中的一个目录。除非我重新启动webpack，否则组件目录中的partials目录中的文件不会被捆绑？？？添加

const TARGET=process.env.npm\u lifecycle\u事件之后，将process.env.NODE_env添加到未更改任何内容的
目标，而不是
。问题是webpack没有监视向下两级的文件。正在监视根目录中某个目录中的文件，对该目录中的文件所做的更改将触发webpack以重新处理站点。但是该目录中的某个目录中的文件没有被监视，下一级的第二个目录不知何故脱离了循环。感谢您的帮助-我做了这些更改，没有得到任何改进。还有其他想法吗？我得到了错误：“进程”和“目录名”没有定义。不知道这是否意味着什么。components目录中的所有内容都正常工作。Components是根目录中的一个目录。除非我重新启动webpack，否则组件目录中的partials目录中的文件不会被捆绑？？？添加
const TARGET=process.env.npm\u lifecycle\u事件之后，将process.env.NODE_env添加到未更改任何内容的
目标，而不是
。问题是webpack没有监视向下两级的文件。正在监视根目录中某个目录中的文件，对该目录中的文件所做的更改将触发webpack以重新处理站点。但该目录中的某个目录中的文件不被监视，第二个目录下一级不知何故脱离了循环。