Webpack第一天

Webpack是什么？我觉得我没必要再介绍了，相信开发前端的都知道现在webpack在前端所占的地位。Webpack就是一个模块打包工具，帮我们转换代码、压缩文件、代码分割、代码教研、自动刷新等等等等。前端三大框架也都是基于webpack。

Webpack现在已经升级到了4+，推出了脚手架，本人也算是从头开始学习，所以我不会也不懂很详细的说一些什么，只是记录自己用webpack搭建一个简易项目的过程。

首先，我把webpack当做项目来做，所以我会先创建一个项目的结构：

src是项目的主要内容，static是不打包的内容，index就不用说了。

进入项目目录，接着下载webpack，推荐的是局部安装，因为怕不同项目使用的版本不一样，全局安装会出现问题。下载之前先初始化package.json，记录我们安装的各种包和插件等。

npm inint -y(-y少了询问的阶段)；

npm install webpack webpack-cli -D(-D是—save-dev的简写，开发时依赖)

安装成功后可以在package.json看见安装了的版本号：

"devDependencies": {
 "webpack": "^4.17.1",
 "webpack-cli": "^3.1.0"
}

这边我不去打包单个的文件，4+的打包都有了默认的，所以这边直接新建配置文件，叫webpack,conf.js，默认是这个，想改也是可以的。这个配置文件按照node的commonJS规范来书写：

let path = require('path');//node的模块

module.exports = {
 entry: './src/main.js',//入口
 output: {//出口
 filename: "main.js",
 path: path.resolve('./dist')//绝对路径
 },
 devServer: {},//开发服务
 module: {},//模块
 plugis: [],//插件
 mode: 'development',//4+新增的模式
 resolve: {}//配置解析
}

因为npm新出了一个npx的命令，号称0配置运行的命令。直接运行的是node_modules对应的webpack.cmd，如果没有安装还能帮你安装webpack。这边使用npx是因为我们还没配置运行命令。

npx webpack：执行之后就打包出了dist文件夹。这边要注意配置文件的单词。

（完）