1.github创建项目,clone到本地
git clone "xxxxxxxx"
cd my_project
2.npm 初始化项目(入口文件写 src/index.js)
npm init
3.创建几个文件夹
mkdir src build test doc example
4.新建 src/index.js 文件
alert('hello world')
5.安装webpack和babel插件
npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest webpack webpack-cli --save-dev
查看 package.json
{
"name": "my_project",
"version": "0.0.1",
"description": "README",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "xxxxxxxx/my_project.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"webpack": "^4.7.0",
"webpack-cli": "^3.1.2"
}
}
6.新建 .babelrc 文件
{
"presets": ["es2015", "latest"],
"plugins": []
}
7. 新建 webpack.config.js 文件,配置webpack
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname,
filename: "./build/bundle.js"
},
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: "babel-loader"
}]
}
}
8. package.json 添加build脚本
"build": "webpack"
9. 装http-server服务
npm install http-server -g
10.package.json 添加启动服务命令
"start": "http-server -p 8080"
11.example文件夹中创建 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>come</title>
</head>
<body>
<p>hello, wo lai le</p>
<script src="../release/bundle.js"></script>
</body>
</html>
12. 运行http服务
npm run start
13.浏览器查看运行结果
访问 http://localhost:8080/example/index.html 查看结果: