从零开始学习webpack（二）

继上一篇内容：从零开始学习webpack（一）

本篇内容：

（一）输出多个编译文件
（二）安装使用dev-server

一、输出多个编译文件

模板：

多入口
entry: {
    名字：'入口文件地址',
    ...
},
output:{
    path:xxx, //输出的路径
    filename: '...[name]...'
}

实际应用：

const pathlib = require('path')
module.exports = {
    entry:{
       index: './src/index', // 输出第一个文件
       test:  './src/1'     // 输出第二个文件
    },   // 编译文件入口
    output:{
        path:pathlib.resolve('dest/'),  //目标目录
        filename: '[name].bundle.js'   // 打包后的文件
    }
}

运行webpack.config.js：

webpack --config webpack.config.js

即可得到两个生成分别对应的编译文件： index.bundle.js, test.bundle.js

生成的文件目录，直接引用即可：

---

dev-server:

1.安装 (全局安装) -g， -D 本地安装
webpack:核心库
webpack-cli： 命令行工具，给webpack-dev-server使用
webpack-dev-server: 用来快速搭建本地运行环境的工具，一个服务器插件，相当于webpack+apache，启动一个web服务并实时更新修改

cnpm i webpack webpack-cli webpack-dev-server -D

下载会比较慢，建议转yarn

安装完后，即可使用

webpack --config 2-devserver.webpack.js

编译结果：

因为运行的指令过长，造成的不便， 可在package.json 修改：
修改前：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

修改后：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":" webpack-dev-server --inline --config 2-devserver.webpack.js"
  },

修改启动指令后，
启动webpack编译指令由原先的：

  webpack-dev-server --inline --watch --config 2-devserver.webpack.js

改为：

npm start 

你还会发现出现了 WARNING警告

这是因为配置中，未声明mode，为‘development’ 或者 ‘production’
在webpack.js中写入：

     mode:   'development', 

设置为development时，webpack不会进行压缩，显示原始信息

---

实现webpack热更新

1.打开webpack.js文件， 添加

	 plugins:[
	        new Webpack.HotModuleReplacementPlugin()
	    ],

2.在devServer模块里面 添加 hot :true

	hot:true

实现效果： bundle.js等文件会被监听，这时候就实现了热更新了