安装
npm i webpack webpack-cli @babel/core babel-loader @babel/preset-env @babel/node clean-webpack-plugin webpack-node-externals cross-env -D
webpack.config.js
const path = require('path')
const webpackNodeExternals = require('webpack-node-externals')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackConfig = {
target: 'node',
mode: 'development',
devtool: 'eval-source-map',
entry: {
server: path.join(__dirname, 'src/index.js')
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader'
},
exclude: [path.join(__dirname, 'node_modules')]
}
]
},
externals: [webpackNodeExternals()],
plugins: [new CleanWebpackPlugin()],
node: {
console: false,
global: true,
process: true,
__filename: 'mock',
__dirname: 'mock',
Buffer: true,
setImmediate: true,
path: true
}
} module.exports = webpackConfig
index.js
import path from 'path'
import Koa from 'koa'
import koaBody from 'koa-body'
import cors from '@koa/cors'
import koaJson from 'koa-json'
import helmet from 'koa-helmet'
import koaStatic from 'koa-static' import router from './routes' const app = new Koa() app.use(koaStatic(path.join(__dirname, '../public')))
app.use(helmet())
app.use(koaBody())
app.use(cors())
app.use(koaJson()) app.use(router())
app.listen(9000)
console.log(2432)
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
package.json
{
"name": "koa-learn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon --exec babel-node src/index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/raind33/test-git2.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/raind33/test-git2/issues"
},
"homepage": "https://github.com/raind33/test-git2#readme",
"dependencies": {
"@koa/cors": "^3.0.0",
"koa": "^2.11.0",
"koa-body": "^4.1.1",
"koa-combine-routers": "^4.0.2",
"koa-helmet": "^5.2.0",
"koa-json": "^2.0.2",
"koa-router": "^7.4.0",
"koa-static": "^5.0.0"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/node": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^6.0.3",
"nodemon": "^2.0.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-node-externals": "^1.7.2"
}
}

该项目github地址

webpack在nodejs中应用(支持es6语法及热加载)的更多相关文章

  1. nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案

    node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...

  2. elasticsearch中ik词库配置远程热加载

    1. 修改 IKAnalyzer.cfg.xml 配置文件中的<entry key="remote_ext_dict">http://127.0.0.1/xxx.txt ...

  3. webpack里CommonJS的require与ES6 的module.exports加载模块有何不同

    只需明白commonjs的规则即可,import会被转化为commonjs格式的,babel默认会把ES6的模块转化为commonjs规范的. import vue from 'vue'; //等价于 ...

  4. Webpack 4.x 默认支持 ES6 语法

    Webpack 4.x 默认支持 ES6 语法 Q: 为什么 webpack4 默认支持 ES6 语法的压缩? A: terser 里面实现了 ES6 语法的 AST解析. webpack 4 里使用 ...

  5. 让intellij idea 14 支持ES6语法

    用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...

  6. 华为手机自带浏览器不支持 ES6 语法

    原文地址:https://caochangkui.github.io/huawei-es6/ 华为手机自带浏览器对 es6 语法的支持度极差,哪怕最新的荣耀10 手机也有该毛病!所以,移动端项目开发中 ...

  7. 使用babel转码器,让浏览器支持es6语法

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...

  8. vagramt中同步文件,webpack不热加载

    这是一篇参考文章:https://webpack.js.org/guides/development-vagrant/ 在使用vue-cli+webpack构建的项目中,如何使用vagrant文件同步 ...

  9. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

随机推荐

  1. 如何理解 PHP的依赖注入(DI) 和 控制反转(IoC)

    名词解释: IoC - Inversion of Control 控制反转 DI - Dependency Injection 依赖注入 依赖注入和控制反转说的实际上是同一个东西,它们是一种设计模式, ...

  2. 不会前后端,用vps搭建个人博客(二)

    <接上一篇>   四.添加网页内容 1.下载安装WordPress 输入以下命令: wget https://wordpress.org/latest.tar.gz 当然你也可以用浏览器进 ...

  3. 《Effective Objective-C》概念篇

    1.运行时 OC 语言由 Smalltalk(20世纪70年代出现的一种面向对象的语言) 演化而来,后者是消息型语言的鼻祖. OC 使用动态绑定的消息结构,在运行时检查对象类型. 使用消息结构的语言, ...

  4. 插件部署【BE、BP、UI】

    1.BE插件部署 XML部署位置:D:\yonyou\U9V50\Portal\bin: DLL部署位置:D:\yonyou\U9V50\Portal\ApplicationServer\Libs; ...

  5. 【题解】Luogu P5294 [HNOI2019]序列

    原题传送门 题意:给你一个长度为\(n\)的序列\(A\),每次询问修改一个元素(只对当前询问有效),然后让你找到一个不下降序列\(B\),使得这两个序列相应位置之差的平方和最小,并输出这个最小平方和 ...

  6. Java子类方法签名相同,返回类型不同

    2019年7月27日15:04:20 Java子类覆盖父类的方法,方法名字相同,参数列表相同,返回类型不同的情况: 如果子类方法返回类型是父类方法返回类型的子类,这是没问题的,否则报错. 在JAVA ...

  7. SpringBoot中使用Interceptor

    https://www.cnblogs.com/chao555/p/9573102.html 1.创建自定义的拦截器并实现HandlerInterceptor接口 package com.demo.c ...

  8. C# vb .net实现邮戳效果滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的邮戳效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...

  9. linq根据英文首字母姓名排序

    names.Sort((a, b) => a.name.CompareTo(b.name));

  10. Java自学-类和对象 构造方法

    怎么使用 Java 构造方法? 通过一个类创建一个对象,这个过程叫做实例化 实例化是通过调用构造方法(又叫做构造器)实现的 步骤 1 : 什么是构造方法 方法名和类名一样(包括大小写) 没有返回类型 ...