SSR中Webpack-Server-Config配置

服务端webpack配置

1. 服务端要正确处理首屏的图片和样式等
2. 服务端要支持动态import，懒加载

webpack.server.js

const config = require('./webpack.base.js');

const serverConfig = {
    target: 'node', // 指定为node环境下
    mode: 'development',
    entry: './src/server',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    externals: [nodeExternals()], // 不打包node_modules等模块
    module: {
        rules: [{
            test: /\.css?$/,
            use: ['isomorphic-style-loader', {  // 处理服务端样式文件
                loader: 'css-loader',
                options: {
                    importLoaders: 1,
                    modules: true,   // 开启css-module
                    localIdentName: '[name]_[local]_[hash:base64:5]'
                }
            }]
        },{
            test: /\.(png|jpeg|jpg|gif|svg)?$/,
            loader: 'url-loader',
            options: {
                limit: 8000,
                outputPath: '../build/',  // 图片资源输出路径
                publicPath: '/'
            }
        }]
    }
};

module.exports = merge(config, serverConfig);

注意的点，其实大部分都是关于webpack的踩坑记录

1. 服务端无法识别和处理css,图片资源等，所以要用webpack打包编译，其中对于css的loaderisomorphic-style-loader
2. express或者koa起的服务代理的静态代理地址一定要对app.use(express.static('build'))
3. 如果在.babelrc中配置了plugin，要注意dynamic-import-node会对lodabel按需加载有影响，因为这是配置服务端支持动态import()的插件，会导致webpack编译碰到import()时被该插件劫持
4. babel-preset-env: "targets": ["node": "current"]要指定node编译支持到当前版本, 不然会报regeneratorTime等不支持等错误
5. 如果想调试前端项目，配置webpack-dev-server时，--hot --inline在webpack最新版本中只需要配置--inline就可以内联刷新，同时index.html中对js的引用要和webpack中配置的contentBase匹配

实战

1. 会开发一个结合SSR《全网音乐免费试听-周杰伦版》的SPA应用
2. 正式开发中还是建议使用Next
3. 关于node中处理css和图片等可以使用插件：webpack-isomorphic-tools,universal-webpack但是前面的作者已经不更新了