栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何将Webpack与Express一起使用?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何将Webpack与Express一起使用?

我最终要做的是,我使用了两种不同的配置,一种用于使用webpack将服务器内容打包在一起,另一种用于将所有浏览器内容打包在一起,并且还运行webpack
dev服务器进行热重装。

*

webpack.node.config.js
现在, *服务器Webpack配置 又看起来像这样:

var webpack = require('webpack');var path = require('path');var fs = require('fs');var nodeModules = {};// note the path.resolve(__dirname, ...) part// without it, eslint-import-resolver-webpack fails// since eslint might be invoked with different cwdfs.readdirSync(path.resolve(__dirname, 'node_modules'))    .filter(x => ['.bin'].indexOf(x) === -1)    .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });// es5 style alternative// fs.readdirSync(path.resolve(__dirname, 'node_modules'))//     .filter(function(x) {//         return ['.bin'].indexOf(x) === -1;//     })//     .forEach(function(mod) {//         nodeModules[mod] = 'commonjs ' + mod;    //     });module.exports ={    // The configuration for the server-side rendering    name: 'server',    target: 'node',    entry: './app/server/serverEntryPrototype.js',    output: {        path: './bin/',        publicPath: 'bin/',        filename: 'serverEntryPoint.js'    },    externals: nodeModules,    module: {        loaders: [ { test: /.js$/,     loaders: [         // 'imports?document=this',         // 'react-hot',         'babel-loader'         //,'jsx-loader'     ] }, { test:  /.json$/, loader: 'json-loader' },        ]    },    plugins: [    // new webpack.NormalModuleReplacementPlugin("^(react-bootstrap-modal)$", "^(react)$")    // new webpack.IgnorePlugin(new RegExp("^(react-bootstrap-modal)$"))    // new webpack.IgnorePlugin(/^./locale$/, /moment$/)  ]};

浏览器的WebPack配置 又名

webpack.browser.config.js
现在看起来是这样的:

var webpack = require('webpack');var path = require('path');var buildPath = path.resolve(__dirname, 'assets');var fs = require('fs');var commonLoaders = [    { test: /.js$/,        loaders: [ 'react-hot', 'babel-loader' //,'jsx-loader'        ]    }];module.exports ={    // Makes sure errors in console map to the correct file    // and line number    name: 'browser',    devtool: 'eval',    entry: [        //'./bin/www.js',        './app/index.js',        'webpack/hot/dev-server',        'webpack-dev-server/client?http://localhost:8081'  // WebpackDevServer host and port    ],    output: {        path: buildPath,        filename: '[name].js',        // Everything related to Webpack should go through a build path,        // localhost:3000/build. That makes proxying easier to handle        publicPath: 'http://localhost:8081/assets/'    },    extensions: [        '',        '.jsx', '.js',        '.json',        '.html',        '.css', '.styl', '.scss', '.sass'    ],    module: {        loaders: [ // Compile es6 to js. {     test: /app/.*.jsx?$/,     loaders: [         'react-hot',         'babel-loader'     ] }, ///app/.*.json$/ { test:  /.json$/, loader: 'json-loader' }, // Styles { test: /.css$/, loader: 'style-loader!css-loader' }, { test: /.s(a|c)ss$/, loader: 'style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss!sass' }, // Fonts { test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' }, { test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/, loader: 'file-loader' } //{ test: /.png$/, loader: 'url-loader?limit=100000' }, //{ test: /.jpg$/, loader: 'file-loader' }        ],        plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin()        ]    },    postcss: [        require('autoprefixer-core')    ],    devtool: 'source-map'};


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/413263.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号