接上一篇webpack打包（七）--使用sass

在webpack打包（三）--使用loader中就使用过了babel-loader的预设编译react,babel能处理的事情还有很多，比如处理es6代码。

安装CLI和预设

npm i -D babel-cli babel-preset-es2015

es2015依赖于babel-cli

- 阅读剩余部分 -

接上一篇webpack打包（六）--css模块化

写样式用sass又方便又高效，习惯之后根本回不去。

安装loader

npm i -D sass-loader node-sass

sass-loader依赖node-sassloader

- 阅读剩余部分 -

接上一篇webpack打包（五）--使用loader处理图片

在app.js中把引入的图片去掉

import React from "react";
import ReactDOM from "react-dom";

import "./common/style/main.css"   

ReactDOM.render(
    <div>React</div>,
    document.getElementById("root")
);

- 阅读剩余部分 -

接上一篇webpack打包（四）--使用webpack-dev-server

在src文件夹下面新建文件夹common,在common下面分别新建img和style文件夹

把src下面的main.css放到style里面，修改app.js里面样式的引用路径import "./common/style/main.css"

准备图片

两张图片，一张小于10kb，一张大于10kb即可，放到img目录

- 阅读剩余部分 -

接上一篇webpack打包（三）--使用loader

下载安装

npm i -D webpack-dev-server

package.json配置

加上启动命令

- 阅读剩余部分 -

接上一篇webpack打包（二）--使用插件

1.在src目录下新建一个index.html文件，添加一个标签<div id="root"></div>

2.webpack.config中的new HtmlWebpackPlugin()改成

new HtmlWebpackPlugin({
        filename:"index.html",
        template:"./src/index.html"
    })

以src文件夹里面的index.html为模板基础创建一个index.html文件。

- 阅读剩余部分 -

接上一篇webpack打包（一）--一次简单的打包体验

使用html-webpack-plugin插件

html-webpack-plugin插件的作用的生成html文件

运行npm i -D html-webpack-plugin安装

webpack打包配置

webpack.config.js

- 阅读剩余部分 -

目录结构

dist是打包后js文件的存放目录

src是我们写的代码

- 阅读剩余部分 -

在hackerrank网站上看到的一道算法题点我

大概意思是有任意一个二维数组，分别把对角的数相加，得到的和再相减，取绝对值

- 阅读剩余部分 -

var arr = [1, 2, 3, 4, 5, 6, 7, 3, 2, 1];
console.log(unique(arr));
function unique(arr) {    
    var o = {};
    for (var i = 0; i < arr.length; i++) {
        o[arr[i]] = 1;
      }    
    return Object.keys(o);
    }

- 阅读剩余部分 -