webpack 3.10.0 配置心得（react和es6）

最近用飞冰的react物料做项目，从以前完全不懂mvvm，没用过es6，大概过了一周多，才对里面的物料慢慢上手，发现真的很好用，react打破原来的html方式，es6也是简化了很多js的写法。并且飞冰有特别棒的一点就是不用配环境，在使用物料的时候也是一键搞定，超级超级方便。

好了，正题，我这一周配webpack的心路历程，（想自己动手从头开始配一次环境，结果过程非常非常非常。。。）

首先webpack版本很多，低了不行，高了有很多坑，最后我用的是3.10.0。我先把我配置的目录粘出来（我把js/css/img分开打包的）build目录是打包后自动生成的，package.json和package-lock.json是初始化项目时生成，手动创建webpack.config.js。主要是package.json和webpack.config.js的配置。

可在package.json中写好相应的依赖包及对应的版本号，用npm install安装即可，若提示依赖版本不对应，根据提示下载相应版本（npm install webpack@3.10.0，在版本后加@版本号即可下载对应版本的依赖包）（安装完成时，有一些warn不影响使用的）。

下面是我的package.json文件截图

如果webpack的版本号不一致，则不可以照搬，依赖包直接不是独立的，相互之间存在依赖关系，如果安装时提示版本不对，按照提示装相应版本。

下面是webpack.config.js的截图，里面只是懂个大概，还是有些不太懂。

这样就全部配置好了，下面是文件的引用

1.js文件的引用，在index.html文件中，引用入口js文件，直接通过script标签引用。其他js文件，可写在入口文件或其他需要引用的地方

2.css文件引用，在需要的地方引入，只有引入的文件，才会打包。会将所有引入的css文件打包到一个index.css的文件中。

3.img图片引用，使用图片前，需要现在js文件中引用（require或import）在我配置的这个环境中，在src下的图片，在没有引用的情况下，不会打包到build下的img文件夹中，所以使用前一定要引用，否则找不到。

下面是一些文件截图

view/index.html

js/main.js（入口js）

js/components/react1.js

js/components/react2.js

这是路径截图

好了，全部结束了。这个环境的暂时发现的缺点（修改代码后要先webpack -w在npm run dev才能更新代码，我这次主要是想完整的弄好一次环境，所以这个还没修改）

搭环境遇到的问题小结：

1.开始遇到的依赖版本问题，耐心下载好对应版本依赖即可（这才刚开始，困难的还不是这）

2.js/css/img单独打包的问题，弄了很久，算是基本解决（引入js或css或图片时，import和require是一样的，只要你路径写对。

3. 引入css时，在html文件中直接link就可以；在js中引入时，直接写相对路径，一直报错“Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file type. +后面跟css文件中样式+”）在引入时换成

import "style-loader!css-loader!../../css/index.css" 改成这样就可以了。

4. 使用图片时，需要先引用，否则不会打包到img文件夹。

最后，网上教程很多，一定要对症下药，依赖版本不一样写法就不一样，照搬不能解决问题。好了，我也是一个菜鸟就自己这两天配环境写的经验，希望能帮到和我一样刚开始踩webpack坑的，有不对的地方欢迎指正。菜鸟一个，非喜勿喷。

github地址：https://gitee.com/LiuXiaoHuaharoro/webpacktest.git 仅供参考哈（欢迎指正）

---------------配环境，写心得还是有点辛苦，转载请注明出处，谢谢配合。