前言：根据视频和webpack官网文档加上自己得实践理解做的学习笔记，视频地址：https://www.bilibili.com/video/av51693431?from=search&seid=11643137955182440094
一、webpack是什么
简单来说，webpack可以看作是一个模块打包机，通过入口文件按照各个文件之间的依赖关系打包成静态资源（像js、css、图片等）。
webpack可以做什么呢
代码转换（比如es6转es5）、文件优化、代码分离、模块合并、自动刷新、代码校验、自动发布等。详见https://www.webpackjs.com/concepts/
废话不多说，赶紧来看看怎么用吧！
二、体验一下零配置
1、npm init 初始化一个项目。
2、本地安装(不建议全局安装，全局安装会因版本不同引发许多问题)
npm install --save-dev webpack webpack-cli
3、根目录下新建一个src文件夹，src下建一个index.js文件。现在的目录结构是这样的：
文章一开始说webpack是一个模块打包机，那先来体验一下它的打包功能。
我们在index.js里写一句话:
console.log('hello webpack!')然后执行以下命行进行打包（注：
npx是npm 5.2新增）npx webpack 看一下有什么变化
执行完
npx webpack后发现多了一个dist文件夹，dist文件夹下有一个main.js，里面的代码已经被打包压缩了。再仔细一看，我index.js文件只写了一句话，打包后却多了这么多代码，这是为什么呢？原因就是webpack在打包时会自动进行模块化。
既然webpack在打包时会自动进行模块化，那么我们就来写一个模块看看。
在src下新建一个a.js，用
module.exports导出，然后在index.jsrequire进来：a.js:
module.exports = 'hello webpack from a.js'
index.js:
let str = require('./a.js')
console.log(str)
然后命令行再执行 npx webpack进行打包，结果发现有一个叫mode的东西，mode是webpack4新增的一个配置，叫做“模式”，默认为production(生产模式)，还可以是development(开发模式),development模式不会压缩代码，更容易阅读一些。
如果你想用
npm run build来执行得话，只需要在package.json里配置一下script脚本即可。比如这样：
"scripts": {
"build": "webpack --config webpack.config.js"
}
当然build是自己起得名字，你也可以起其他的名字。
我们暂时在dist目录下手动创建一个index.html,并将打包后的main.js引入（自动生成html后面再说）:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
将index.html在浏览器中打开，控制台里就可以看到有‘hello webpack from a.js’了。
零配置是很弱的，复杂一点的要求，还需要手动配置。
三、手动配置webpack
默认配置文件名：webpack.config.js（采用node语法来写）,在根目录下新建一个webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js', //入口文件
output: {
filename: 'bundle.[hash].js', //默认为main.js
path: path.resolve(__dirname,'./dist') //path为绝对路径，用node path模块转化
},
mode: 'development' //开发模式
}
[hash]是为了避免js缓存这样每次修改都会产生一个文件造成冗余，可以安装clean-webpack-plugin来清楚上个版本：
npm i clean-webpack-plugin -D
webpack.config.js里引入
const CleanWebpackPlugin = require('clean-webpack-plugin')
plugins:[ //存放插件
new CleanWebpackPlugin()
]
此时的webpack.config.js:
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: './src/index.js', //入口文件
output: {
filename: 'bundle.[hash].js', //默认为main.js [hash]是为了避免js缓存
path: path.resolve(__dirname,'./dist') //path为绝对路径，用node path模块转化
},
mode: 'development', //开发模式
plugins:[ //存放插件
new CleanWebpackPlugin(['./dist'])
]
}
删除dist文件夹，再运行一下npm run build，你会发现dist文件夹下打包出了一个build.js,里面的内容和默认的生产模式打包出来的内容有所不同，此时打包出来的代码体积比较大了但更易于阅读了。
这时再在dist目录下新建一个index.html并引入打包好的build.js,在浏览器中打开，控制台里依然可以看到正确输出。
但每次都手动添加html文件太麻烦了，能不能打包的时候自动生成呢？
html-webpack-plugin插件就可以实现了
打包自动生成html
1、首先进行安装
npm i html-webpack-plugin -D
2、src下新建html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
</body>
</html>
3、webpack.config.js里引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
4、webpack.config.js plugins模块添加HtmlWebpackPlugin
plugins:[ //存放插件
new HtmlWebpackPlugin({
template: './src/index.html', //模板
filename: 'index.html', //默认也是index.html
minify: {
removeAttributeQuotes: true, //删除标签属性的双引号
collapseInlineTagWhitespace: true, //打包成一行
},
hash: true, //增加hash，避免缓存
}),
new CleanWebpackPlugin(['./dist'])
]
此时删掉dist文件夹再执行npm run build进行打包，完了会发现dist文件夹下已经生成了index.html并且自动引入了bundle.js。此时在浏览器打开index.html，控制台依然可以看到正常输出。
每次都在文件中打开html，这样有点low，那么我们来配置一个本地服务器吧！
配置本地开发服务器
1、还是先安装
npm i webpack-dev-server -D
我们还需要在webpack.config.js中配置一下devServer。
devServer:{ //开发服务器配置
port: 3000, //端口号
progress: true, //进度条
contentBase: './dist', //服务默认指向文件夹
open: true //自动打开浏览器
}
启动这个服务可以通过npx webpack-dev-server,也可以在package.json scripts脚本配置：
"dev": "webpack-dev-server"
这样把npm run dev作为启动开发环境。
目前scripts下配置了两个脚本
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
}
运行npm run dev,则自动在浏览器打开了一个服务。打开控制台还是可以看到正常的输出。
webpack默认只支持js，那我想把css也打包怎么办？请看下一篇webpack4系列第二篇
