大前端

大前端前端框架分类及选型下一代web引擎koa框架1-10 优化webpack配置,npm 构建构建脚本【实战篇】前端框架分类及选型下一代web引擎koa框架1-10 优化webpack配置,npm 构建构建脚本【实战篇】没有引入koa-body, 对post请求中body部分的数据是不能进行处理的;对开发中的webpack进行了配置,并没有对打包这一块进行优化 而且在package.json没有去配置webpackf的打包命令进一步优化koa的应用...
摘要由CSDN通过智能技术生成

前端框架分类及选型

下一代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: 
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值