今天开始从头复习webpack的使用，把一些以前没有遇到现在才发现的问题一一整理出来，同时，还会推荐一些webpack的实用文章。
一、安装webpack并进行第一次打包
webpack之所以流行的一个重要原因是因为前端的技术发展越来越复杂，前端项目依赖的库越来越多，尤其是在spa兴起以后尤甚，而webpack则是一个将各种东西进行分离和打包的一个打包器。
webpack的安装十分简单:
mkdir webpack-try && cd webpack-try
npm init -y
npm install --save-dev webpack
这样就安装完了webpack， 接下来我们要使用webpack进行第一次打包
mkdir src && mkdir dist
cd src && touch entry.js
然后在entry.js里写几行代码entry.js
document.getElementById('app').innerHTML = 'Hello Webpack!'
再在根目录下新建index.html文件
index.html
<script src="./dist/bundle.js"></script>
当然，这个时候我们还没有bundle.js文件，它是打包完之后生成的文件。执行打包命令：
./node_modules/webpack/bin/webpack src/entry.js dist/bundle.js
这样，在浏览器里打开index.html就会看到 Hello Webpack! 了
二、webpack.config.js多入口和多出口的配置
实际上，我们在上面的打包过程中直接指定了入口entry.js和出口bundle.js，其实我们还可以在一个文件里对于这些信息进行配置，这个文件就是webpack.config.js 。当我们配置完这个文件的时候，每次用webpack进行打包，webpack都会默认就找这个文件，使用里面的配置。
webpack.config.js文件的结构：
module.exports = {
entry:{}, //入口文件的配置
output:{}, //出口文件的配置
module:{}, //各类型loader的配置
plugins:[], //各类插件的配置
devServer:{} // 服务的配置
}
多出口文件的配置如下:
const path = require('path') //使用node.js拿到path,下面要用
module.exports = {
entry:{
entry: './src/entry.js' //入口的文件及路径
entry2: './src/entry.js' //第二个入口文件及路径
},
output:{
path: path.resolve('__dirname', './dist') // 出口的路径
filename:'[name].js' //指定出口文件的名称
},
module:{}, //各类型loader的配置
plugins:[], //各类插件的配置
devServer:{} // 服务的配置
三、使用webpack-dev-server对页面进行更新
本小节这是本篇小博客最重要的内容啦
安装webpack-dev-server
npm install webpack-dev-server --save-dev
webpack.config.js里的配置如下:
devServer:{
contentBase: path.resolve(__dirname, './dist'), //这里指的是服务器在哪个文件夹下起
host: 'localhost', // 服务器的IP地址，可以使用IP也可以使用localhost
inline:true, //看下文
compress:true, //是否起用服务端压缩
port:1717 //默认为8080
}
inline: true, 指的是dev-server自动刷新模式，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；使用iframe模式是不需要在devServer进行配置的，只需使用特定的URL格式访问即可；不过我们一般还是常用inline模式，在devServer中对inline设置为true后，当我们启动webpack-dev-server时仍要需要配置inline才能生效
我们在package.json的script里写一个快捷方式
"dev": "webpack-dev-server --inline --open" // inline 即是使用inline模式进行热更新, --open是起动服务器时打开新窗口
配置到这里，我们已经可以看到，每当我们修改代码并且进行保存的时候，浏览器都会进行自动刷新，但实际上，webpack还有一个热模块替换的功能，即不刷新页面，只对于修改的部分进行调整。
但是这里有好几处坑必须要注意：
1. 在webpack-dev-server里配置 hot:true
2. 引入webpack.HotModuleReplacementPlugin并使用
3. 必须在入口文件里加入以下代码：
if(module.hot){
module.hot.accept();
}
4. 在script里不能加--hot，不然会有调用栈溢出的报错
疑问：如何将index.html文件放到根目录下呢？
网友评论