大前端

前端框架分类及选型

下一代web引擎koa框架

1-10 优化webpack配置，npm 构建构建脚本【实战篇】

没有引入koa-body， 对post请求中body部分的数据是不能进行处理的；
对开发中的webpack进行了配置，并没有对打包这一块进行优化
而且在package.json没有去配置webpackf的打包命令

进一步优化koa的应用
pm -check-updates检查npm依赖包是否有新的版本

在全局进行安装，使用ncu命令去检查package.json

npm依赖包，如果没有大版本更新，可以考虑更新package.json里面的版本，这样就可以使用很多新的特性

2.ncu --help 可以查看很多ncu的指令

使用–help 可以查看很多cli的命令
ncu: 可以检查哪些依赖包需要更新

ncu -u : 去更新依赖包
删除nodemodules,重新安装，这时候package.json和依赖就得到了更新

通过koa-compose依赖包，将所有的中间件进行整合

import koa from 'koa'
import path from 'path'
import helmet from 'koa-helmet'
import statics from 'koa-static'
import router from './routes/routes'
import koaBody from 'koa-body'
import isonutil from 'koa-json'
import cors from '@koa/cors'
import compose from 'koa-compose'

const app = new koa()

//app.use...
//app.use(helmet())
//app.use(statics(path.join(__dirname, '../public')))
//app.use(router())

//使用koa-compose 集成中间件
const middleware = compose([
    koaBody(),
    statics(path.join(__dirname, '../public')),
    cors(),
    jsonutil({
    pretty: false, param: 'pretty' }),
    helmet()
])

app.use(middleware)
app.use(router())

app.listen(3000)

webpack配置

新建config文件夹

webpack.config.base.js是通用配置，无论生产和开发模式都要用到

生产和开发环境通常需要用到NODE_ENV去区分

1.在传递package.json脚本的时候可以用cross-env来设置NODE_ENV，传递给脚本程序，脚本程序通过cross-env来加载不同的webpack的配置

2.webpack.config.dev.js,开发环境中的webpack配置

3.webpack.config.prod.js，生产环境中webpack配置

webpack.config.base.js和webpack.config.js内容非常相似

webpack.config.base.js

const path = require('path')
const webpack = require('webpack')//引入webpackp配置
const nodeExternals = require('webpack-node-externals')
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin')

debugger

const webpackconfig =  {
   
  target: 'node',
  entry: {
   
    server: path.join(__dirname, 'src/index.js')
  },
  output: {
   
    filename: '[name].boundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
   
    rules: [
      {
   
        test: /\.(js|jsx)$/,
        use: {
   
          loader: 'babel-loader'
        },
        exclude: [path.join(__dirname, '/node_modules')]
      }
    ]
  },
  externals: [nodeExternals()],
  plugins: [
    new CleanWebpackPlugin(),
    //DefinPlugin允许我们去创建一个全局的常量，常量是webpack在进行打包的时候去进行使用的
    //打包时候端口号，url都可以通过NODE_ENV去区分
    new webpack.DefinePlugin({
   
        'process.env': {
   
            NODE_ENV: (process.env.NODE_ENV ==='production' ||
            process.env.NODE_ENV ==='prod') ? "'production'" : "'development'"
        }
        })
  ],
  node: {
   
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __fileName: true,
    __dirname: true,
    setImmediate: true,
    path: true
  }
}
​
console.log(webpackconfig)

module.exports = webpackconfig

webpack-merge:合并我们的webpack配置

webpack.config.dev.js

const webpackMerge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.config.base')
const webpackConfig = webpackMerge(baseWebpackConfig, {
   
//删除base里面的devtool和model
	devtool: