webpack入门到进阶（一）安装

前端技术要求：node，webpack的安装等使用需要你有node基础。

用webpack打包项目已经有一年半的 时间了， 我也试试总结一下，然后，进阶一下，做下webpcak的使用优化。

首先从最基础的地方讲起，介绍一下webpack是做什么的？

webpack 翻译就是网站打包工具，可以打包的资源可以参考:https://webpack.js.org/；

可以看到：webpack可以将js,css,sass,png,等等资源进行打包。打包就意味着压缩，这也是实现前端工程化的一个重要组成部分。是代表着前端模块化开发。

 1.webpack的安装

 webpack全局安装：在Window+R打开命令台，首先确认已经安装好node了。没有安装的，可以：https://nodejs.org/zh-cn/;

安装完毕后，可以使用node -v 检查是否安装成功；

然后就可以进行webpack的安装了。

npm install webpack webpack-cli -g

但是，我不建议，使用这种全局安装的方法，稍微有些经验的前端，更愿意，在项目中进行webpack的安装使用。

npm install webpack webpack-cli -D

 执行这个命令行：意味着你是在当前项目中进行的webpack安装。

会生成一个package.json文件：

{
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }
}

devDependencies下声明：开发环境依赖的包；

此时：你在终端执行webpack命令是报错的：

因为，这个命令是只有全局安装的时候，才可以的。我们现在是在项目里安装的webpak，所以需要执行下面的代码：

npx webpack

ps:npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装。

但是：你还会发现报错：没有找到src目录。

因为打包就是打包src目录文件的。所以我们要新建src目录文件包含一个index.js文件

// index.js
console.log('webpack从入门到进阶')

此时，我们再次执行：

npx webpack

 可以看到，当前项目下会生成一个dist目录，包含main.js，可以看到，里面包含我们在index.js里面书写的内容。

 这篇文章，就先介绍到这里，会持续更新的。

webpack入门到进阶（二）