【发布时间】:2020-02-11 09:44:21
【问题描述】:
如何使用 node express 启动 webpack 项目。 我尝试了 webtack 目标节点属性,但我所针对的文件没有按预期由 babel 处理。 webpack 配置文件:
import webpack from 'webpack';
import path from 'path';
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('development'),
__DEV__: true
};
export default {
name:'server',
debug: true,
devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: false, // set to false to see a list of every file being bundled.
entry: './tools/socketServer.js',
target: 'node', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: `${__dirname}/dist`, // Note: Physical files are only output by the production build task `npm run build`.
publicPath: 'http://localhost:3000/', // Use absolute paths to avoid the way that URLs are resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev.
filename: '/bundle.js'
},
externals: nodeModules,
plugins: [
new webpack.DefinePlugin(GLOBALS), // Tells React to build in prod mode. https://facebook.github.io/react/downloads.htmlnew webpack.HotModuleReplacementPlugin());
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
{test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
{test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
]
}
};
【问题讨论】:
-
在这里看看我的回答,它包含了一堆让节点端 Webpack+Babel 工作的东西,并有一个例子:stackoverflow.com/questions/37369053/…
标签: node.js webpack babeljs webpack-dev-server