In NetEase

合并”1.5.2”分支到我(heshiyu)的分支上

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支持

在package.json的一些“约定”

script:
① 除了“start”是特殊的指令,可以直接npm start。其他的都要npm run 指令名字
② 直接写“webpack”即可,因为package.json会先搜寻本项目下的node_modules/.bin啦

JS的Babel,CSS的PostCSS

CSS Module

CSS模块化:把module传递到所需要的地方,然后直接把CSS雷鸣传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中使用相同的类名而冲突。

...
  loader: "css-loader",
    options: {
        modules: true
    }
...

常需要的4个Babel

babel-core
babel-loader
babel-preset-es2015
babel-preset-react

Babel放哪里

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"]
}

ES6语法中的import

//后面如果是.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

猜你喜欢

转载自blog.csdn.net/ak47bo88/article/details/78432020