webpack构建项目、git版本控制、使用github pages发布

[7986LiChang]

1.Yeoman

yeoman 脚手架工具，在项目立项初期，可以用来生成项目文件和代码结构，yeoman自动将最佳实践和相关工具整合，加速并方便后续开发。 yeoman基于nodejs环境

//安装yeoman
npm install -g yeoman

//查看yeoman版本
yo --version

//安装generator：react-webpack
npm install -g generator react-webpack

//查看webpack generator版本
npm ls -g --depth=1 2>/dev/null | grep generator-
-g指查看全局的安装包，--depth因为安装包具有树形层次联系，depth指定为1只查看深度为1的安装包

//利用react-webpack生成项目文件
yo react-webpack projectName

2.webpack VS browserify

webpack为项目提供更框架性的配置 browserify类似为用户定义了一系列小模块

[7986LiChang]

3.webpack下进行项目开发的关键命令

npm install //安装package.json中定义依赖的包 npm start //开发模式：启动本地运行localhost:8000/webpack-dev-server 。会启动热更新App hot update
npm run dist //生产模式：生成dist目录下的assets文件夹，打包项目发布需要的文件 npm run serve:dist //模拟项目发布后的模式，启动本地运行localhost:8000 。没有热更新状态提示栏

4.代码发布到github pages

1、首先要两个地方的文件路径：index.html中src "asset/app.js"，改为相对路径；配置文件default.js中publicPath: "asset/" ，也改为相对路径，在浏览器运行时才能是路径“https://7986lichang.github.io/gallery-by-react/assets/app.js” 2、进入生产模式将代码打包npm run dist 3、通过git add dist，添加dist目录 4、提交 git commit -m "add dist" 5、将dist目录推送到远程gh-pages分支，git subtree push --prefix=dist origin gh-pages 6、在浏览器中输入 https://7986lichang.github.io/gallery-by-react/ 即可访问 其中，一定要注意修改文件路径，否则报错404找不到对应文件。

[7986LiChang]

5. autoprefixer-loader

用于处理css文件，自动为css文件添加浏览器产商前缀 1、安装方法：
npm install autoprefixer-loader --save-dev
save-dev参数表示：将npm包的依赖添加到package.json文件中的devDependencies项中 2、安装好后，将其添加进default.js的loaders中 在其中loaders检测下，为后缀为css/scss的正则对象，添加autoprefixer-loader,使用autoprefixer-loader?{browsers:["last 2 version"]}，?后表示使用浏览器的最新两个版本

loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version"]}'
      },
     {
        test: /\.scss/,
        loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version"]}!sass-loader?outputStyle=expanded'
      }
]

[7986LiChang]

6. sass-loader 和 node-sass

将sass文件编译为css。它依赖于node-sass和webpack

1、首先安装node-sass 安装node-sass总会各种不成功，但一般都是因为：安装node-sass时，要从github.com上下载一个.node文件，大部分安装不成功都是因为这里下载出了问题，因为GitHub Releases的文件都托管在s3. amazonaws.com，这个网址国内访问总会网络不稳定，需要通过第三方服务器下载这个文件。 安装方法：使用淘宝镜像。拆分两条命令。每次安装之前，都先set一下，秒装。 set SASS_BINARY_SITE = https://npm.taobao.org/mirrors/node-sass npm install node-sass

2、再安装sass-loader npm install sass-loader node-sass webpack --save-dev node-sass 和 webpack是sass-loader 的 peerDependency，因此能精确控制它们的版本

[7986LiChang]

7. json-loader 解析json文件

安装方法： npm install json-loader --save-dev