【转】webpack学习笔记

转自 咸鱼老弟 的博文，

原文地址：http://www.cnblogs.com/xianyulaodi/p/5314769.html#_label5

之前在react的项目中有用过webpack，不过没有认真的去研究，这段时间又重新好好的学习一下webpack，发觉 webpack是一个很强大的东西。而且很好用，方便，接下来主要是做一下学习的笔记

这次我还是在react中来使用它。我的react界面是单页面的应用

首先你的项目的根目录下要有一个package.json文件，来进行安装一下相应的依赖

package.json如下

　　

然后npm install就行依赖文件的安装

大概的目录结构是这样子

　　

　　

index.html 内容如下：

这里我们还是需要手动引入的。 可以看到，我们只是引用了打包后的css和js,这个后面有说。先引入进去先

在react中，我们引入css是直接在js中引入的，比如我们的 index.js,当然，你也可以直接在html引入一个总的css

　　

other.js:

　　

app.js 路由的入口文件。

其实内容随便写都行，因为主要是用来演示一下webpack的打包而已，并不是演示react-router

app.js

webpack 配置及项目打包编译

这里是关键，在根目录下我们新建一个webpack.config.js，我们将进行一些配置，来完成我们的需求。刚开始可能不好理解，没关系测试多几次，你就会发觉它的神奇之处。

　

　好了，此时你在cmd输入 webpack 就会看到在dist那里会生成两个目录，js和css这两个文件夹，js里面有vendor.bundle.js和app.bundle.js. css里面你会发觉只有一个app.css。

html-webpack-plugin 插件，动态为html加入js和css

　　在前面的html中，我们是手动引入css和html的。但是webpack的这个插件可以动态将我们的js和css自动加载到html 上，也就是说。可以将

index.html改为

不过我觉得这个动态加载js和css的方法用不用都无所谓。

注意：

在网上的教程中，你会发觉有些动态加载js和css到html中会报错。提示找不到那个路径，这是为什么呢，因为是他们的 publicPath这里错了。

他们的是 　　　　publicPath: '/dist/',

而实际上应该改为 publicPath: '../',

解决打包后图片出现的路径问题：

问题：

　　打包后，你有会发觉另一个问题，就是背景图中，小一点的图片会被转为base64，可以正常演示，但是我本地的图片，img的src中却找不到路径了。会报错。这个问题比较诡异，我网速找了好多资料都没找到怎么解决的。后来自己随便乱搞，总结出来3个解决方法：

方法1、你在引入图片的时候用这样来引入，那么就不会报错了

不过我是用在react当中的，其他地方暂时没试过。虽然我的方法可以本地图片加载出来，不过始终觉得不是一个好方法

方法2：将webpack.config.js 配置中的

改为下面这样：

这样子修改之后，小于8k的图片不会转为base64，而且图片的名字也不会变成hash值。这样就可以找到路径了。那么如果很多比较小的图片怎么办呢，那就只能做好雪碧图了。

方法3 ：

将你的图片放到cnd上，引入图片的之后直接引入你线上的链接，这样的话图片就不会被打包，从而避免了图片的路径问题。不过要手动改动挺大的

这里顺便粘贴一下我的server.js.在根目录下

server.js

最后附上 webpack命令的几种基本命令

　　

这篇文章主要是记录一下学习webpack的笔记，具体的大家还是需要实际操作一下。webpack真的是一个神奇的东西，不单单是用在react的打包当中，用在前端的任何框架下打包都是可以的。可以说是gulp的2.0版本。值得一玩

用在react当中打包压缩的话，一个项目下来，所有的文件加起来也不过几百k,对性能肯定是有好处的。

有一篇很不错的，关于webpack的文章，可以看看 https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/