ES6开发环境快速搭建

Posted 2022-10-21 闲云阁

所需工具及说明

• webpack 用于打包
• webpack-dev-server 用于检测文件变化
• hjs-webpack 简化webpack配置的工具

安装工具命令

npm install -g webpack
npm install -g webpack-dev-server

创建项目目录

mkdir project && cd $_
npm init -y
npm install hjs-webpack --save

创建webpack配置文件webpack.config.js

var getConfig = require('hjs-webpack')
module.exports = getConfig(
    // 入口JS文件的位置
    in: 'src/app.js',
    // 应用打包（build）之后将存放在哪个文件夹 
    out: 'public',
    // 是否在每次打包之前将之前的打包文件
    // 删除
    clearBeforeBuild: true
)

创建源码src/app.js

document.body.innerhtml="hello world"

启动webpack开发服务器

webpack-dev-server

此时在src/app.js文件中就可以进行ES6开发了，若需打包成文件可执行 webpack