使用nodejs的webpack

Question

我是reactjs中的新成員。我剛開始學習reactjs。我在使用nodejs中的webpack時遇到了問題。我想創建將運行webpack文件的節點服務器。我有webpack文件：

const {resolve} = require('path'); 
const webpack = require('webpack'); 
const validate = require('webpack-validator'); 
const {getIfUtils, removeEmpty} = require('webpack-config-utils'); 

module.exports = env => { 
    const {ifProd, ifNotProd} = getIfUtils(env) 

    return validate({ 
    entry: './index.js', 
    context: __dirname, 
    output: { 
     path: resolve(__dirname, './build'), 
     filename: 'bundle.js', 
     publicPath: '/build/', 
     pathinfo: ifNotProd(), 
    }, 
    devtool: ifProd('source-map', 'eval'), 
    devServer: { 
     port: 8080, 
     historyApiFallback: true 
    }, 
    module: { 
     loaders: [ 
     {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /(\.eot|\.woff2|\.woff|\.ttf|\.svg)/, loader: 'file-loader'}, 
     ], 
    }, 
    plugins: removeEmpty([ 
     ifProd(new webpack.optimize.DedupePlugin()), 
     ifProd(new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
     debug: false, 
     quiet: true, 
     })), 
     ifProd(new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: '"production"', 
     }, 
     })), 
     ifProd(new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     compress: { 
      screw_ie8: true, // eslint-disable-line 
      warnings: false, 
     }, 
     })), 
    ]) 
    }); 
}; 

如何使用此配置與nodejs。請幫助

Answer 1

我不知道這是否會幫助，但我認爲你需要做的另一種方式圓：

1. 創建您的配置未Webpack.config文件（的WebPack）。
2. 您的webpack文件包含節點服務器（Express）。
3. 您的服務器返回您的字體結束文件（React）。

您可以在此post中瞭解關於webpack的一些信息。

Answer 2

試試這個。在webpackConfig.js

var config = require('./your_config') 
 

 
config(<your_env>)

運行這段代碼保存爲 「節點webpackConfig.js」

Answer 3

我的建議：

的package.json腳本（安裝的WebPack（ - g和-save-dev），nodemon（-g和-save-dev）和併發（-save-dev））

"scripts": { 
    "webpack-watch-client": "webpack -w", 
    "server": "nodemon server", 
    "dev": "concurrently --kill-others \"npm run webpack-watch-client\" \"npm run server\"" 
    } 

個

webpack.config.js例如

'use strict' 

const path = require('path'); 

const PATHS = { 
    app: path.join(__dirname, 'src'), 
    public: path.join(__dirname, 'public') 
}; 


module.exports = { 
    entry: { 
    app: PATHS.app, 
    }, 
    output: { 
    path: PATHS.public, 
    filename: 'js/bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
    rules: [ 
     { 
     test: /\.(js|jsx)$/, 
     exclude: /node_modules/, 
     use: [ 
      { 
      loader: 'babel-loader', 
      options: { 
       presets: ['react', 'es2015'] 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      { loader: 'style-loader' }, 
      { loader: 'css-loader' } 
     ] 
     }, 
     { 
     test: /\.(woff|woff2|eot|ttf)$/, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: { 
       outputPath: 'assets/fonts/' 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: { 
       outputPath: 'assets/img/' 
      } 
      } 
     ] 
     } 
    ] 
    }, 
plugins: [ 
// plugins 
    ] 
}; 

節點服務器起始點爲./server.js

陣營客戶起始點爲./src/index.js

輸出路徑./public包含index.html用線條：

<div id="root"></div> 
    <script type="text/javascript" src="/js/bundle.js" charset="utf-8"></script> 

輸出路徑bundle.js是./public/js

爲字體輸出路徑是./public/assets/fonts

輸出路徑爲圖片爲./public/assets/img

開始：npm運行dev（監聽端口定義在服務器。JS）

等

Answer 4

首先你所有的WebPack配置不會對的WebPack 2+運行，因爲webpack-validator已過時的，所以我已刪除了它。我建議您全球安裝npm install webpack-dev-server -g，並將其用作您的反應開發中的服務器。這是你可以修改配置使用它（webpack.config.js）：

const path = require("path"); 
const webpack = require('webpack'); 
const {getIfUtils, removeEmpty} = require('webpack-config-utils'); 

module.exports = env => { 
    const {ifProd, ifNotProd} = getIfUtils(env) 

    return { 
    entry: [ 
     "webpack-dev-server/client?http://localhost:3003", 
     "webpack/hot/only-dev-server", 
     "react-hot-loader/patch" 
    ], 
    context: __dirname, 
    output: { 
     path: path.join(__dirname, './build'), 
     filename: 'bundle.js', 
     publicPath: '/build/', 
     pathinfo: ifNotProd(), 
    }, 
    devtool: ifProd('source-map', 'eval'), 
    devServer: { 
     contentBase: path.join(__dirname, "src"), 
     // enable HMR 
     hot: true, 
     // embed the webpack-dev-server runtime into the bundle 
     inline: true, 
     // serve index.html in place of 404 responses to allow HTML5 history 
     historyApiFallback: true, 
     port: 3003 
    }, 
    module: { 
     loaders: [ 
     {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /(\.eot|\.woff2|\.woff|\.ttf|\.svg)/, loader: 'file-loader'}, 
     ], 
    }, 
    plugins: removeEmpty([ 
    //... 
    // same as before 
    //... 
    ]) 
    }; 
}; 

的package.json：

{ 
    ... 
    "dependencies": {}, 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "react-hot-loader": "^3.1.1", 
    "webpack": "^3.8.1", 
    "webpack-config-utils": "^2.3.0", 
    "webpack-dev-server": "^2.9.4", 
    } 
} 

在同一文件夾中webpack.config。 JS是使一個文件webpack.development.js，這將只設置enviorment：

var config = require('./webpack.config.js') 

module.exports = config("development"); // can be "production" or "development" 

文件結構：

root 
    build 
     bundle.js 
    src 
     index.html 
    index.js 
    package.json 
    webpack.config.js 
    webpack.development.js 

在剛剛結束運行： webpack-dev-server --config webpack.development.js --progress -p --hot -w

--hot - 將運行服務器， -w - 看文件

Answer 5

採取甘德在我的github回購。

這是一個簡單的快速博客應用程序，它使用webpack進行開發，無w/o webpack-dev-server。當錯誤發生時，這將在瀏覽器中重新加載並顯示消息。在生產中，您需要編譯FE的webpack。然後將./.env文件中的環境變量更改爲生產。在運行express時，服務器在生產時將指向公共目錄中的捆綁文件。

這不包括ReactJS，但我的webpack配置文件設置爲es2015 & & .jsx文件。

https://github.com/christian4423/express_blog

此代碼是有點過時，而不是評論太清楚......但它應該可以幫助您設置。如果您有任何問題，隨時問:)下午的電子郵件

我有另一個回購利用webpack與反應，是相當流行。但是，該回購是私人的。如果您是PM，我可以與您分享。