这是我参与「第四届青训营 」笔记创作活动的第2天

1.webpack是什么？

webpack是一种前端资源构建工具，一个静态模块打包器。 在webpack看来，前端所有资源文件（js/json/css/img/less）等都会作为模块处理 他根据模块依赖关系进行静态分析，打包生成对应静态资源。

上面是webpack官网画的依赖图

webpack五个核心概念 一、Entry

入口指示，webpack以哪个文件为入口起点进行开始打包，分析构建依赖关系图

二、Output

输出指示，webpack打包后资源输出到哪里去，以及怎么命名

三、Loader

在module文件下，让webpack能够去处理那些非js文件（webpack自身只理解js文件），主要是翻译作用，比如css和img

四、Plugins

插件可以用于执行范围更广得任务，插件范围包括，从打包和压缩，一直到重新定义环境中得变量等

五、Mode

模式指示webpack使用相应模式得配置

webpack一次编译

webpack -v实时编译监听，当资源文件改变，自动重新打包

2.你踩坑了没？

对于webpack的学习，最快的方法自然是看官方文档，但当你稍微了解了一番之后，就发现它有个弊端，版本没法向前兼容。

这就让我们很多初学者挠头了，很多时候搭建脚手架总是因为版本不匹配报错，（特别是webpack、webpack-cli、webpack-dev-server这三个的版本号）如下图：

当然，我截图的错误其实更加愚蠢了，上下文"context"拼成了"contest"。。。（真的很容易写错的！！！） 所以小伙伴再报错之后别急，务必先仔细校正下代码。

这个的话主要是contenBase已经被弃用了，很尴尬。

可以将你的contentBase配置改成下面的配置方法：

static: { //服务器所加载文件的目录 directory: path.join(__dirname, 'dist'), },

如果代码没问题的话，也可以采用下面的解决方法了

• 首先：webpack，webpack-cli都在安装一遍
• 全局安装npm i webpack –g
• 指定版本3.0.0：npm i webpack@3.0.0 -g
• 安装到项目依赖中npm i webpack --save-dev
• 全局安装 npm install webpack-cli –g
• 安装到项目依赖中 npm install webpack-cli --save-dev

问题：版本不兼容webpack版本过高。

两种方法：

1）更换打包命令为: webpack ./src/main.js -o ./dist/bundle.js

2）降低webpack版本 使用3基本都可以 npm i webpack@3.0.0 -g

问题：在项目中本地安装的webpack-dev-server，无法把他当做脚本命令在powershell终端中直接运行（只有安装到全局-g的工具，可在终端中正常执行）

解决：在package.json文件中scripts中添加dev指定为该工具

"scripts": { "dev":"webpack-dev-server" },

这是我碰到过的坑，希望大家能够别被这些坑耽误太多时间啦。 学习的时候可以去仔细看看webpack整合.js，和.css文件，这样获得更深刻的理解。