遥看套路挖掘机，不见当年老司机。this is a boilerplate
1.新建一个项目目录文件夹，暂且叫seed
cd seed npm init
然后一直回车，最后yes，最终生成一个package.json文件
2.新建以下
- src 文件夹用于存放js，css，img等源码和引用的静态文件
- .babelrc babel编译器配置文件
- favicon.ico 浏览器默认读取的一个icon
- index.html 入口首页
- webpack.config.js webpack配置文件
3.用npm安装npm包
npm install webpack webpack-dev-server --save-dev
webpack和webpack-dev-server是打包工具和辅助开发的服务器，该服务器能热加载代码，自动刷新页面，代理服务器解决前端开发时跨域问题见http://www.cnblogs.com/fengnovo/p/5983638.html
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
这几个是babel编译器的npm包。
npm install css-loader postcss-loader style-loader --save-dev
webpack需要处理样式文件打包的处理器
npm install react react-dom --save
react项目的两个基础npm包
再在package.json里的scripts对应的key里增加一句 "start": "webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot",
这样，就可以在命令行用npm start启动一个开发服务器并实时热更新开发时的代码。
"scripts": {
"start": "webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
4.webpack.config.js配置，直接上代码
module.exports = {
entry: __dirname+‘/src/main.js‘, //指明编译开始的入口
output: {
path: __dirname+‘/bundle.js‘ //指明编译好的文件所在目录
},
module: { //webpack处理器模块，要处理什么就加什么处理器即loader
loaders:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: ‘babel‘ //babel处理器，处理jsx/es6/es7
},{
test: /\.css$/,
exclude: /node_modules/,
loader: ‘style-loader!css-loader‘ //处理css，style样式
}
]
},
solove: [
‘‘,‘.js‘,‘.jsx‘ //import时文件不写后缀，可以自动查找.jsx和.js后缀文件
],
devServer: { //webpack-dev-server配置，与webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot相辉映
contentBase: ‘./‘,
colors: true,
inline: true,
historyApiFallback: true
}
}
5.配置完webpack，里面的babel只是告知webpack用babel处理js，但是还要配置babel处理哪些文件格式，直接上代码
{
"presets": [
"react",
"es2015",
"stage-0"
]
}
6.inde.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>novo Music</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
./bundle.js就是webpack.config.js里面配置的输出文件路径，然后被index.html引入
7.需要在src目录下新建一个main.js作为webpack.config.js配置里面所提到的入口编译文件
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
ReactDOM.render(
<div>Hello World</div>, document.getElementById(‘app‘)
)
boilerplate套路这就样
项目所在github：https://github.com/fengnovo/diary/tree/master/seed
时间： 2024-11-05 12:25:25