共计 1074 个字符，预计需要花费 3 分钟才能阅读完成。
node.js 安装
此过程没有难点，略过
下载完成后可以通过 node - v 和 npm - v 来查看是否安装成功以及版本后
webpack 安装
新建一个目录 (项目名称), 进入该项目，npm init, 然后一路回车即可。(会生成一个 package.json 文件)
在根目录下创建 src 目录，并在 src 目录下创建 index.js 文件
在项目的根目录下执行 npm install webpack webpack-cli –save-dev
npm install webpack-dev-server html-webpack-plugin –save-devwebpack-dev-server 是启动一个本地的服务，html-webpack-plugin 是一个插件，用来使用 html 的模板
在根目录下创建 webpack.dev.config.js 文件
编辑 package.json 文件：
“scripts”: {
“dev”: “webpack-dev-server –config ./webpack.dev.config.js –mode development”
}
安装 babel 相关插件
npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest –save-dev
在项目的根目录下创建.babelrc
{
“presets”: [“es2015”, “latest”],
“plugins”: []
}
修改 webpack.dev.config.js 并运行
在 webpack.dev.config.js 种添加内容
const path = require(“path”);
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
module.exports = {
entry: ‘./src/index.js’,// 入口文件
output: {
path: __dirname,
filename: ‘./release/bundle.js’
},
plugins: [
new HtmlWebpackPlugin({
template: ‘./index.html’
})
],
devServer: {
contentBase: path.join(__dirname,’./release’), // 运行的目录
open: true, // 自动刷新浏览器
port: 9002 // 端口号
}
}
现在就可以在 src 下的 index.js 中写 es6 代码啦
运行 npm run dev; 可以看到会自动访问 localhost:9002
