1.react轮播图项目配置及原理概要

项目配置及原理概要

1.初始化项目

npm init -y

• 生成package.json文件

2.安装依赖包 开发依赖

npm install webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-0 style-loader css-loader less-loader less file-loader url-loader html-webpack-plugin -D

• webpack 打包
• webpack-dev-server 用来启动一个HTTP服务器预览我们的项目
• babel-core babel-loader 进行转译 把es6和react代码转译成es5
• babel-preset-react 用来转译react
• babel-preset-es2015 用来转译es6
• babel-preset-stage-0 用来转译es7
• style-loader css-loader 用来处理css
• less-loader less 编译less
• file-loader url-loader 用来处理资源文件
• html-webpack-plugin 用来自动产出html文件
• open-browser-webpack-plugin 自动打开浏览器

3.安装生产依赖

npm install react react-dom -S

4.配置文件的出入口路径

• 新建一个webpack.config.js文件，在文件中配置入口文件和出口路径

  let path=require('path');
  module.exports={
      entry:'./src/index.js',//入口文件
      output:{//出口配置
          path:path.resolve('build'),//出口文件路径
          filename:'bundle.js'//出口文件名称
      }
  };

5.启动安装的模块文件夹node_modules–>.bin–>webpack.cmd和webpack-dev-server.cmd文件

• 在package.json文件中的scripts标签进行匹配

  "scripts": {
      "build": "webpack",
      "dev":"webpack-dev-server"
    },

5-1.启动webpack和webpack-dev

• 在cmd中执行命令

  npm run build

• 1)在cmd窗口中显示

      Asset     Size  Chunks             Chunk Names
  bundle.js  2.52 kB       0  [emitted]  main
     [0] ./src/index.js 43 bytes {0} [built]

• 表示生成bundle.js一个文件

• 2)在当前项目文件夹下会自动生成一个build文件夹，同时在build文件夹下会自动生成bundle.js文件，我们的入口文件(src文件夹下的index.js)会自动打包到出口文件bundle.js中

6.自动产出html文件

6-1.现在我们需要在build文件夹中新建一个index.html文件，然后引入bundle.js进行预览;但是现在我们希望这个文件不要手动创建了，希望他可以自动生成，要做到这一点，我们需要引入插件html-webpack-plugin(此插件在最初已经安装过,如果没有安装需安装后才可使用)

• 1) 在webpack.config.js中引入html-webpack-plugin

  let HtmlWebPackPlugin=require('html-webpack-plugin');

• 2) 同时给插件再添加个配置项plugins,plugins是个数组

  plugins:[
      new HtmlWebPackPlugin({
          template:'./src/index.html'
      })
  ]

• 3) template 模板 配置到时候会按照哪个模板来自动产出html文件 并且把它自动放到配置目录下–>一般会在src文件夹下新建一个模板叫index.html

• 4) 执行npm run build
• 4-1).原理:此时如果再执行npm run build的话，就会执行上面配置的plugins插件,插件会读取src文件夹下的index.html模板文件，把他自动插入到打包后的bundle.js，并且把bundle.js保存到build目录下(每次执行npm run build命令，都会重新生成bundle.js和index.html两个文件)

• 4-2).在cmd命令行执行npm run build,命令行显示:

       Asset       Size  Chunks             Chunk Names
   bundle.js    2.52 kB       0  [emitted]  main
  index.html  188 bytes          [emitted]
     [0] ./src/index.js 43 bytes {0} [built]

• 表示生成bundle.js和index.html两个文件,与之前执行npm run build相比多了一个html文件

• 4-3).打开我们的项目文件夹下的build文件会发现，已经自动生成了一个出口index.html出口文件,打开这个index.html出口文件会发现,index.html中已经自动引入了bundle.js文件

关于react轮播图的源码,无缝版已上传至github,https://github.com/gaodaxiu0406/React-Slider