express+react

create-react-app myapp

cd myapp
express-generator --view=ejs server 

//这里我已经写成对象格式了
//有多少个页面就添加多少个key:value
//这里我已经添加了一个admin
//数组中的paths.appSrc+‘/admin.js‘就是这个html页面的入口文件
    entry: { 
        index:[
            require.resolve(‘./polyfills‘),
            require.resolve(‘react-dev-utils/webpackHotDevClient‘),
            paths.appIndexJs,
        ],
        admin:[
            require.resolve(‘./polyfills‘),
            require.resolve(‘react-dev-utils/webpackHotDevClient‘),
            paths.appSrc + ‘/admin.js‘,
        ]
    }

//多少个页面就new 多少个 HtmlWebpackPlugin 
//并且在每一个里面的chunks都需要和上面的entry中的key匹配
//例如上面entry中有index和admin这两个。
//这里的chunks也需要是index和admin
    new HtmlWebpackPlugin({
        inject: true,
        chunks:["index"],
        template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
        inject: true,
        chunks:["admin"],
        template:paths.appHtml,
        filename:‘admin.html‘
    }),

//由于原配置入口文件只有一个，因此output中的filename是写死的，
//增加多入口之后，输出文件名被写死，对应生成了多个boundle.js，
//后面生成的会覆盖前面生成的文件，所以需要制定输出的文件名不能写死
output: {
    path:paths.appBuild,
    pathinfo: true,
    filename: ‘static/js/[name].bundle.js‘,
    chunkFilename: ‘static/js/[name].chunk.js‘,
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
    path.resolve(info.absoluteResourcePath).replace(/\\/g, ‘/‘),
 },

//这里的paths.appIndexJs和paths.appSrc+‘/admin.js‘是入口文件
    entry:{
        index:[
            require.resolve(‘./polyfills‘), 
            paths.appIndexJs
        ],
        admin:[
            require.resolve(‘./polyfills‘),
            paths.appSrc+‘/admin.js‘
        ]
    }

//和开发环境下一样，多少个html就new多少个 HtmllWebpackPlugin，每个都需要指定chunks,并且指定filename，在minify中配置是否压缩js、css等，这是生产环境下的配置
    new HtmlWebpackPlugin({
      inject: true,
      chunks:["index"],
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks:["admin"],
      template: paths.appHtml,
      filename:‘admin.html‘,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),

//这里的rewrites:[ {from: /^\/admin.html/, to: ‘/build/admin.html‘ }] 数组里面是一个个对象，
//对象中前面的值是在开发时候访问的路径，例如 npm run start之后会监听 localhost:3000 ，
//此时在后面加上 /admin.html就会访问admin.html中的内容，默认是访问index.html；
//数组中的第二个值是生产环境下的文件的路径。
//如果有很多页面，就在rewrites中添加更多对象
    historyApiFallback: {
      disableDotRule: true,
      rewrites: [
        { from: /^\/admin.html/, to: ‘/build/admin.html‘ },
      ]
    },

//package.json中加入
 "proxy": {
     "/api1": {
         "target": "http://api1.xxxx.com",
         "changeOrigin":true
     },
     "/api2":{
         "target":"http://api2.xxxx.com",
         "changeOrigin":true
     }
 }

//修改webpack.config.dev与webpack.config.prod两个文件，加入相同配置
//增加方法
function resolve(dir) { 
    return path.join(__dirname, ‘..‘, dir) 
}
//修改 alias配置
alias: {
     ‘react-native‘: ‘react-native-web‘, 
    //加入配置
     ‘@src‘: resolve(‘src‘)
}

//修改webpack.prod.conf.js文件，增加如下内容
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
//修改package.json文件，在scripts中增加如下命令
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)
module.exports = {
    plugins: [
           new UglifyJSPlugin(),
     ]
}

//修改webpack.config.prod.js文件：
//注释devtool:shouldUseSourceMap? ‘source-map‘:false
devtool:false,//增加
3）添加cache-loader，减少打包时间
//修改webpack.config.dev.js文件：
module:{
    rules:[{
      use:[
              //添加在最前面
          ‘cache-loader‘, 
      ]
    }]
}

//修改entry文件，
entry: 
//这里的paths.appIndexJs和paths.appSrc+‘/admin.js‘依然是每个html的入口文件
{
       index:[
           require.resolve(‘./polyfills‘),
           paths.appIndexJs,
        ],
        admin:[
            require.resolve(‘./polyfills‘),
            paths.appSrc+‘/admin.js‘
        ],
        //增加vendor
        vendor:[‘react‘,‘react-dom‘]
},
//修改plugin
plugin:{
    //新增以下代码
    new webpack.optimize.CommonsChunkPlugin({
      name: ["vendor"],
      // filename:‘static/js/vendor.[chunkhash:8].js‘,
      // minChunks: 3  //三方库在逻辑代码中被调用两次(数字可以自定义)， 将公共的代码提取出来
    }),
/* 防止 vendor hash 变化 */
  // extract webpack runtime and module manifest to its own file in order to
  // prevent vendor hash from being updated whenever app bundle is updated
  new webpack.optimize.CommonsChunkPlugin({
    name: ‘manifest‘,
    chunks: [‘vendor‘]
  }),
}
//修改plugins中的HtmlWebpackPlugin，在chunks中添加需要引入的公共包，
//其中公共包需放在后面，使其在加入html页面时能在其它js文件前面 
new HtmlWebpackPlugin({    inject: true,    chunks:["index","vendor"],    template: paths.appHtml,    minify: {        removeComments: true,        collapseWhitespace: true,        removeRedundantAttributes: true,        useShortDoctype: true,        removeEmptyAttributes: true,        removeStyleLinkTypeAttributes: true,        keepClosingSlash: true,        minifyJS: true,        minifyCSS: true,        minifyURLs: true,    },}),new HtmlWebpackPlugin({    inject: true,    chunks:["admin","vendor"],    template: paths.appHtml,    filename:‘admin.html‘,    minify: {        removeComments: true,        collapseWhitespace: true,        removeRedundantAttributes: true,        useShortDoctype: true,        removeEmptyAttributes: true,        removeStyleLinkTypeAttributes: true,        keepClosingSlash: true,        minifyJS: true,        minifyCSS: true,        minifyURLs: true,    },}),

//修改server（express项目根目录）目录下的package.json文件，将node改为nodemon
//将"start":"node ./bin/www"改为：
"start":"nodemon ./bin/www"

//修改path.js文件，module.exports中的appBuild变量
//将appBuild: resolveApp(‘build‘),改为
appBuild: resolveApp(‘server/public‘),

"scripts": {
    "start": "node scripts/start.js",
    "server-start": "cd server && npm run start",//增加server启动命令
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

|——src
|————|common //公共组件目录，如http.js、cookie.js等
|————|components //基础组件、业务组件、业务代码抽象出的一些基础类，例如每个页面可以在此目录下建立一个文件存放相关组件。
|————|layouts //布局相关组件及其样式文件，如header.js、footer.js、menu.js等
|————|styles //公共样式文件
|————|static //公共的静态资源文件，如公共的图片资源文件等
|————|views //页面入口文件，可与comonents中的页面组件对应

|——server // express项目根目录
|————|bin 
|——————|www  //服务器相关配置文件
|————|controllers //控制器层，处理前端请求
|————|models //数据库操作相关文件
|————|node_modules //npm包安装目录
|————|public //react打包目录，存放所有的html，js/css/图片等资源文件
|————|routes // 路由文件目录
|——————|api.js //api请求路由文件
|——————|pages.js // 页面请求路由文件
|————|utils // 公共文件目录
|——————|config.js //各种常量或公共方法
|——————|db.js // 数据库访问方法封装
|——————|http.js //http请求方法封装
|————|views // express框架自带，由于打包后的文件全放在public目录下，因此这个文件可不用了
|————|app.js //入口文件
|————|package.json 
|————|package-lock.json