一，webpack的认识
一直用vue脚架自动生成项目，但其他最主要的webpack是怎么搭建的，怎么编译 怎么构建 估计很少人会去关注，做个webpack的记录和见解，我们先通过一个图片来认识webpack;
这个图片基本就把webpack的功能介绍出来了
- 能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,
- 能有Grunt或Gulp所有基本功能 比如打包、压缩混淆、图片转base64等。将less。sass编译成css文件；
- 解决大型项目初始化加载慢的问题,能够在大型项目中运用
- 每一个静态文件都可以看成一个模块
- 可以整合第三方库
- 可以通过node在浏览器里直接运行
二.使用webpack
-
安装webpack配置 npm init 初始化生成
package.json文件 需要你填写相关项目的信息 而通过npm init -y 可以生成一个默认的 -
npm install -g webpack 全局安装webpack
-
npm init npm install webpack --save 通过npm把webpack的依赖导入项目中
-
4.x的版本把cli分离出来了，所以必需安装webpack-clinpm install --save-dev webpack-cli 或者 npm install -D webpack-cli -
验证是否安装成功：webpack -v，如果出现下面报错
执行一下 npm install -g webpack-cli
就可以了 现在我们就可以开始玩起来了。
三.配置文件的认识
webpack的工作都是通过配置文件完成的。编译哪个文件、怎么编译、编译成什么样、输出为什么等等，所有的操作都是按配置文件里的内容来完成的，webapck想要运行的话配置文件是必不可少的东西。通常我们都是在webpack.config.js文件进行配置，采用CommonJS的规范，用moudle.exports导出
配置文件有6个核心的东西组成
entry：入口文件（就跟页面的index，从什么地方开始）output：出口文件（这个就是告诉要把这些东西放到什么地方去）module：模块（放lorder，编译浏览器不认识的东西，一些第三方的控件，比如压缩，sass）plugins：插件（辅助开发，提高开发效率，）devServer：服务器（webpack提供的本地服务器 可以直接本地修改映射到浏览器 同步更新 而不用在按刷新）mode：模式，分为开发模式、生产模式。此为4.X里新增的
四. 小测试
创建一个小demo，目录结构如下
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
//js/index.js
window.onload = ()=>{
const box = document.querySelector('.box');
box.innerHTML = '1231231';
}
//webpack.config.js
const path = require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径
module.exports = {
entry: './js/index.js', //入口文件为main.js
output: { //输出
path: path.resolve(__dirname, 'dist'), //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
filename: 'bundle.js' //输出的文件名
},
}
对应的代码如上图 ，打开命令窗口 执行 webpack 会自动去查找 webpack.config.js文件，执行里面的配置
如果执行了webpack报错 先执行一下 npm i --save-dev webpack，在重新执行webpack
在目录我们可以看到一个新的文件夹 dist
引入的话可以看到为我们刚才在index.js写的效果是一样的
这个就是最简单的webpack运行
五.语法糖和步骤
官网文档 https://www.webpackjs.com/concepts/entry-points/
- 入口文件 entry: string|Array<string>| {[entryChunkName: string]: string|Array<string>}，
- 只打包一个文件（单入口），写个字符串
- 把多个文件打包成一个文件，写个数组
- 把多个文件分别打包成多个文件，写成对象
webpack把打包后的文件叫Chunck
- 出口文件 output 配置
output选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置filename用于输出文件的文件名。字符串- 目标输出目录
path的绝对路径。__dirname是nodejs里的一个模块，表示当前文件的绝对路径 通过引入path模块 通过resolve来定义绝对路径path.resolve(__dirname,'输出文件的路径');
六.多文件
目录的话 就是在JS文件夹里多添加了一个文件two.js文件
数组形式 ：
可以看出webpack会把数组里所有文件打包成一个js文件
对象格式
webpack会把对象里的文件分别打包成多个文件
更加详情的配置请到webpack官网查询