Webpack不會將更改綁定到某些文件，而無需重新啓動服務器

我可以獲得一些幫助嗎？我想讓我的項目中的所有文件自動觸發一個新的bundle.js。 modules目錄中的文件執行此操作。但partials目錄下的文件不會。Webpack不會將更改綁定到某些文件，而無需重新啓動服務器

文件結構如下圖所示。

文件的更改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' } 
] } }

來源

2016-11-05 Joe Bien

您還沒有添加resolving功能，必須使用import和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' 
      } 
     ] 
    } 
};

來源

2016-11-06 01:21:48 Mardzis

感謝您的幫助 - 我做了這些改變和我沒有得到任何改善。任何其他想法？ –

我收到錯誤：'process'和'__dirname'未定義。不知道這是否意味着什麼。組件目錄中的所有內容都正常工作。組件是根目錄中的一個目錄。除非重新啓動webpack，否則組件目錄中partials目錄中的文件不會被捆綁。 ??? –

添加'const TARGET = process.env.npm_lifecycle_event;'並在此之後添加，而不是'process.env.NODE_ENV'到'TARGET' – Mardzis

Webpack不會將更改綁定到某些文件，而無需重新啓動服務器

回答

相關問題