1/先切换到”1.5.2”分支,pull最新的内容到本地;
2/然后切换到”heshiyu”分支,选择“合并“ – “从抓取的远程分支合并“
3/最后再从本地分支“heshiyu“ push 到远程分支“heshiyu“
“实时加载”:明显的全局刷新
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
“热加载”:看不出刷新效果,类似局部刷新
//webpack.config.js
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
hot: true//多了这项!
},
plugins: [
...
new webpack.HotModuleReplacementPlugin();//热加载插件
]
//另外也要一些Babel支持
script:
① 除了“start”是特殊的指令,可以直接npm start。其他的都要npm run 指令名字
② 直接写“webpack”即可,因为package.json会先搜寻本项目下的node_modules/.bin啦
CSS模块化:把module传递到所需要的地方,然后直接把CSS雷鸣传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中使用相同的类名而冲突。
...
loader: "css-loader",
options: {
modules: true
}
...
babel-core
babel-loader
babel-preset-es2015
babel-preset-react
Babel可以放在webpack.config.js,但是因为配置选项过多,一般放在.babelrc(webpack会自动调用.babelrc里的babel配置选项)
//webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
/*
options: {
presets: [
"es2015", "react"
]
}
*/
},
exclude: /node_modules/
}
]
}
}
//.babelrc
{
"presets": ["react", "es2015"]
}
//后面如果是.js可以省略
import A from './A'//意思是导入A模块的export default
import AB from './A'//意思是导入A模块的export default
import {A} from './A'//意思是导入A模块的export const A(命名导出)
import A, { myA, Something } from './A'//意思是默认导出A模块,以及命名导出myA、Something