React轮播图（上）

5-1.启动webpack和webpack-dev#

• 在cmd中执行命令

1
npm run build

• 1. 在cmd窗口中显示

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

表示生成bundle.js一个文件

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

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

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

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

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

1
plugins:[
2
    new HtmlWebPackPlugin({
3
        template:'./src/index.html'
4
    })
5
]

• 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,命令行显示:

1
     Asset       Size  Chunks             Chunk Names
2
 bundle.js    2.52 kB       0  [emitted]  main
3
index.html  188 bytes          [emitted]
4
   [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