webpack使用nodejs
我是新的反应。 我只是开始学习reactjs。 我在nodejs中使用webpack有问题。 我想创build将运行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, }, })), ]) }); }; 我怎样才能使用这个configurationnodejs。 请帮忙
首先你的webpackconfiguration不能在webpack 2+上运行，因为webpack-validator已经被弃用了，所以我把它移除了。 我build议你在全局安装npm install webpack-dev-server -g ，并在反应开发npm install webpack-dev-server -g它作为服务器。 这是你如何修改你的configuration来使用它（ 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所在的文件夹中创build一个文件webpack.development.js ， 这只需要设置环境：
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 – 监视文件
我的build议：
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
React客户端的起点是./src/index.js
输出path./public包含带有行的index.html ：
<div id="root"></div> <script type="text/javascript" src="/js/bundle.js" charset="utf-8"></script>
bundle.js的输出path是./public/js
字体的输出path是./public/assets/fonts
图像的输出path是./public/assets/img
开始： npm运行dev （监听端口在server.js中定义）
等等
我不知道这是否会有所帮助，但我认为你想要相反：
- 创build你的configurationWebpack.config文件（Webpack）。
- 您的webpack文件包含节点服务器（Express）。
- 您的服务器返回您的字体结束文件（反应）。
你可以在这篇文章中了解一些有关webpack的信息 。
尝试这个。 将这段代码保存在webpackConfig.js中
var config = require('./your_config') config(<your_env>)
在我的github回购中找一个胆小鬼。
这是一个简单的快速博客应用程序，使用webpack开发w / o webpack-dev-server 。 当发生错误时，这将在浏览器中重新加载和显示消息。 在生产中，您可以编译FE的webpack。 然后将./.env文件中的环境variables更改为生产。 运行express时，服务器在生产时将指向公共目录中的捆绑文件。
这不包括ReactJS，但我的webpackconfiguration文件是为es2015 && .jsx文件设置的。
https://github.com/christian4423/express_blog
这段代码有点过时了，没有评论太好……但它应该可以帮助你build立起来。 如果您有任何问题，请随时问:)邮件的PM
我有另一个回购利用webpack与反应，是相当stream行的。 但是，这个回购是私人的。 如果您是PM，我可以与您分享。