webpack配置问题

前端打包工具——Webpack配置问题
 

最近刚刚接触webpack这款打包工具，遇上了许许多多的小问题，而且整个理解也很混乱，因为webpack有1.0和2.0的区别，同时他又有许多别的插件和依赖，导致版本之间存在一定的问题，这里我整理了一下，关于webpack+react配置出现的一些小问题。

问题一：自动打包。

自动打包，我之所以归类为问题，是因为自己在开发的时候也犯糊涂。一开始接触webpack的时候，因为热加载没有配置成功所以就使用了打包＋Browsersync实现它的自动打包加刷新。随着webpack的深入，发现其实可以不用每次都打包，个人认为，你需要发布了或者有什么转移或者上传之类的，可以进行一次打包，平时开发修改啊调试呀，都也不用频繁的打包。（不知道有没有人是开着--watch的，也许没有人和我一样这么笨，反正我之前的项目就是这么干的，而且东西一多，打包就很慢！！！！）

操作方式：

终端输入：


npm控制输入：


以上两种方式都可行。

 

问题二：热加载&&热更新

这个问题是浪费我时间最多的，在react开发中需要使用webpack-dev-server和react-hot-loader两个插件相互配合，而通过npm去下载的react-hot-loader只会下载到1.3.0的版本（好像是这个版本，反正我现在通过
npm install react-hot-loade就只会下载这个版本）

你需要通过指定版本号下载 react-hot-loader@^3.0.0-beta.6 这个版本才能开启热加载。全部的方式可以参考官网，或者中文翻译网站http://www.css88.com/doc/webpack2/
里面有介绍，同时有示例代码，可以拷下来运行之后慢慢比较。

 

问题三：为CSS样式命名hash值

第一次开发的时候，因为react是组件化，然后代码中就有组件嵌套，结果样式重名导致了一些问题。对于这个问题，我们可以使用打包之后样式名变成哈希值的方式就解决。

但是跟着网上的一些教程，结果我又出了错误。

 


以上是成功后的结果。

实现这样的方式，网上的方式很简单，在webpack.config.js文件中，修改css-loader的参数，如下图。



但是，我跟着如此配置，结果还是出现问题了。

问题的原因很简单，是因为我的引入方式不对。一开始接触react的时候，对于样式文件的引入，我是通过import "./App.css"
这样的方式，因为这种方式引入的样式和传统的书写一样，在<div className="app">这样就能调用。

然而想正常使样式变成哈希值，需要换一种方式。



如上图这样引入才能使样式名变成哈希值，如此我们就不需要担心样式重名的问题了。

以上就是我在配置webpack的时候遇到的问题，也许这些问题很简单，但是如果有人遇上这样的问题，看看这篇文章也能少走弯路。