何为webpack
webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
webpack初体验
命令：webpack 被打包目录 打包目录
本地安装webpack，创建两个文件夹：src开发目录，dist生产目录
基本结构如下：
├── dist
│ └── index.html
├── src
│ └── entry.js
执行打包命令：webpack ./src/entry.js ./dist/bundle.js
这时候，神奇的事情出现了，dist多了一个bundle.js文件
初识webpack.config.js
我们知道前端提倡工程化思想，然而上面的打包方式显然违背了这个思想。
于是我们使用webpack配置文件webpack.config.js进行打包
webpack.config.js的代码如下
module.exports = {
entry:{
entry:'./src/entry.js', //entry为打包后的文件名，即output里的[name]
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js', //打包后生成的文件名
},
}
在这段代码中：
- entry表示入口，它可以有多个入口文件
- output表示出口，它可以有多个出口文件
- path表示打包到的目录，使用__dirname可以兼容不同系统
- filename表示打包后的文件名
这样子，我们只需要执行一条命令：webpack 就完成了打包
uglifyjs-webpack-plugin
前面我们完成了js的打包，但是打包后的代码却占了大量的空间，为了减少数据量，我们要对它进行压缩，这里我们使用的插件是uglifyjs-webpack-plugin
既然使用到了插件，就需要在webpack配置文件中进行以下配置：
- 引入插件（注：这个插件是不需要安装的）
const uglify = require('uglifyjs-webpack-plugin'); - 配置插件（注：使用插件都使用到new）
//插件
plugins:[
new uglify() //压缩
],
然后再执行webpack，我们发现js文件大大减小了
html-webpack-plugin
上面我们说到，我们有两个目录src和dist。这里有一个问题，我们在dist目录下创建了一个index.html。
我们知道dist目录是生产目录，它下面的文件都应该是自动生成的，而不应该手动添加，修改。
于是我们使用html-webpack-plugin插件。
同样的步骤，这样就不赘述了。
以下是配置插件的代码：
//插件
plugins:[
new htmlPlugin({
minify: { removeAttributeQuotes:true //去除属性的引号 },
hash: true,
template: './src/index.html',
})
],
在这段代码中：
minify
minify 的作用是对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩。来看看这个压缩选项。执行结果：
<!-- 原html片段 -->
<div id="example" class="example">test minify</div>
<!-- 生成的html片段 -->
<div id=example class=example>test minify</div>
hash
hash选项的作用是 给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false 。执行结果：
<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
执行 webpack 命令后，你会看到你的生成的 html 文件的 script 标签内引用的 js 文件，是不是有点变化了。
bundle.js 文件后跟的一串 hash 值就是此次 webpack 编译对应的 hash 值。
template
模板文件
我们删除dist文件夹，然后webpack执行
执行后的结果为：
生成了dist文件夹，并且里面有index.html和entry.js两个文件
loader配置
前面我们讲了js的打包和压缩，那么我们如何对css文件进行打包呢？
我们在entry.js中引入css文件import css from './css/index.css';
然后执行webpack进行打包
然而这样就行了吗！？ 这样运行是会报错的
为什么，因为webpack打包出来的都是js文件，它无法转换css格式
这就需要我们安装两个loader： style-loader&css-loader
wepback为了实现将css，sass，less打包为js，需要对应的loader支持
这里以style-loader&css-loader为例：
- 安装style-loader&css-loader
- 配置style-loader&css-loader
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'],
},
]
},
上面增加了一条规则（rule）：所有以.css结尾的文件用style-loader&css-loader处理。
这样子，我们再执行webpack命令，就可以将css文件一并打包到bundle.js文件中了。
less&sass
我们平常写代码时，不会仅使用css，可能会使用功能更强大的less，sass。那么我们如何对这些格式进行打包呢？
先将less&sass转换成css，再进行打包就可以了
代码如下：
{
test:/\.less$/,
use:[{
loader:'style-loader'
},{
loader:'css-loader'
},{
loader:'less-loader'
}]
很多人一下子看到这么多loader，可能就乱了。别急，我给你理一理这些loader
首先我们要知道一件事：loader的加载顺序是从右往左，从下往上的。
对于css打包，我们的代码是use:['style-loader','css-loader']，从右往左，先使用css-loader再使用style-loader。less你可以参考上面的代码。
然后再说说各loader的作用：
- css-loader：处理css文件中的url()等
- style-loader：将css插入到页面的style标签
- less-loader ：将less文件编译成css
- sass-loader ：将sass文件编译成css
怎么样，现在是不是很清晰了。
代码抽离
上面我们说到如何将css，less，sass打包成js文件。但是可能开发中，我们需要将它们抽离出来，形成单独的css文件。这样子应该怎么做呢？
没错，我们要用到一个插件，它的名字是extract-text-webpack-plugin
基本步骤就不扯了，直接上代码
plugins:[
new extractPlugin('css/index.css'),//打包后的文件路径和文件名
],
相应的，我们也要修改loader的配置，这里以less为例：
{
test:/\.less$/,
use:extractPlugin.extract({
use:[{
loader:'css-loader'
},{
loader:'less-loader'
}],
fallback:'style-loader'
})
},
经过use操作后less打包成了一个css文件，然后使用fallback
fallback: 编译后用什么loader来提取css文件
注：以上笔记参考了技术胖的webpack3.x成神之路，以及很多大神的博客
会持续更新。写的不好，有错欢迎踩**
另：博客链接地址：
Webpack3.X版 成神之路 技术胖