关于webpack的完整学习
终于学习了一下webpack
webpack 是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具。WebPack可以看做是模块打包机（bundler），通过分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
为什么要使用webpack
- JavaScript和CSS的依赖问题。开发过程中，JavaScript和CSS的在页面中的顺序问题，经常会造成CSS没起作用，JavaScript的某个变量和方法找不到。
- 性能优化。一般浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是为了前端项目的代码更清晰，结构更合理，我们采用了MVC，MVVM等很多架构分解出了很多JS文件，无疑又拖慢了网页的速度。为了解决这个问题，一般会采用以下两个方案：
(1)、 文件合并。浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件。当需要加载的文件非常多，网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。
(2)、 文件压缩。我们知道文件越大，下载越慢，而针对JavaScript和CSS，里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响。 - 提高开发效率。主要体现在：
(1)、 Vendor前缀。在CSS3使用越来越多的时候，我们都知道一些CSS3的新特性，在不同的浏览器中，CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀。关于vendor前缀的学习
(2)、单元测试。JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常有必要的，能进一步检测你的项目的健壮性和容错能力。关于MVVM的学习
(3)、代码分析。我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。
(4)、版本升级。
Grunt和Gulp
Gulp/Grunt是基于task任务的一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，是基于整个项目进行构建的。Gulp/Grunt在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。如图：
而webpack把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。如图：
Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
loader
webpack本身只能加载js/json模块，如果要加载其它类型的文件/模块, 就需要使用对应的loader进行转化和加载。
loader可以将所有类型的文件转换为webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
loader一般以 xxx-loader 的方式命名，xxx代表了这个loader要做的转化功能，比如：css-loader，json-loader等。
webpack安装
全局安装：npm i webpack -g
项目依赖：npm i webpack --save-dev
简单示例
webpack01.html
<body>
<div id="test">
哈哈哈
</div>
<script type="text/javascript" src="js/test.js"></script>
</body>test.js
import $ from 'jquery';
import '../css/common.css';
$(function () {
$('#test').addClass("test");
});通过命令打包：
webpack js/test.js --output dist/bundle.js --mode development
打包完成后项目下多出dist文件夹，把webpack01.html拷贝进去，在页面上访问，可以出现相同效果
webpack把所有依赖打包成一个bundle.js文件，通过代码分割成单元片段并按需加载。关于webpack打包原理学习于：https://blog.csdn.net/baozhiq...
webpack配置文件
除了以上通过命令来打包，还可以通过配置文件配置webpack的入口文件等等信息,在终端直接执行webpack即可打包。
webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
// 入口文件配置
entry: './js/test.js',
// 输出配置
output: {
// 出口文件
filename: 'bundle.js',
// 设置全路径
path: path.resolve(__dirname, 'dist')
},
module: {
// 规则数组, 里面的每一个对象都是在描述一个loader
rules: [
{
//css文件加载，正则表达式css文件的路径
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
////图片文件加载
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
query: {
name: 'img/[name]-[hash:5].[ext]'
}
},
],
},
]
},
devServer:{
contentBase: './dist'
}
};关于配置文件详解来自于：https://blog.csdn.net/qq_3977...
css文件打包
webpack打包css文件需要添加style-loader和css-loader模块:npm install css-loader style-loader --save-dev(或者通过配置文件引入)
css-loader让我们能使用类似@import和url(...)的方法实现require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起能够把样式表嵌入webpack打包后的JS文件中。关于测试代码，上面示例已展示。
webpack插件
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
HtmlWebpackPlugin
该插件依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。
通过`npm install --save-dev html-webpack-plugin命令安装。
webpack.config.js的配置:
使用：删除掉原先打包编译生成的dist文件夹，重新执行webpack，该插件会自动根据指定的模板页面帮助我们创建index.html文件，并做好相关配置引入。
自动编译打包
webpack-dev-server提供了一个简单的web服务器，并且能够实时重新加载(live reloading)。
通过npm install --save-dev webpack-dev-server命令安装。
webpack.config.js的配置：
编译打包：
package.json中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open",
"build": "babel js --out-dir lib"
}终端执行npm start即可。