1.认识webpack（grunt/gulp的区别和联系）
webpack是一个现代的javascript应用的静态模块打包工具。
webpack的功能：代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布
-
webpack中前端模块化介绍
前端模块化方案： AMD, CMD,CommonJS, ES6.
项目通过模块化开发完成了之后，还需要处理模块间的各种依赖，并且将其进行整合打包。
webpack其中的一个核心就是让我们进行模块化开发，并且会帮助我们处理模块间的依赖关系。
而且不仅仅是javascript文件，包括css文件，图片，json文件等等在webpack中都可以被当
作模块来使用。这就是webpack中模块化的概念。 -
webpack中打包如何理解呢？
打包就是指，webpack将各种资源模块进行打包合并成一个或多个包。
并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss，less
转换为css，将ES6转换为ES5，将TypeScript语法转换为javascript等等。 -
将webpack和grunt/gulp进行对比？
grunt/gulp的核心是task。
我们可以配置一系列的task，并且定义task要处理的事物（例如ES6,TS转换，图片压缩，scss转成css等）
之后让grunt/gulp来依次执行这些task，而且让整个流程自动化/
所以grunt/gulp也被称为前端自动化任务管理工具。
grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能，是他附带的功能。 -
那么什么时候使用grunt/gulp和webpack呢？
如果你的工程模块依赖非常简单，甚至没有用到模块化的概念，只需要进行简单的合并，压缩，就是用grunt/gulp就可以了。
如果整个项目使用了模块化管理，而且相互依赖非常强，我们就需要使用更加强大的webpack了。
2.该系列文章主要学习webpack的内容
- webpack常见配置
- webpack高级配置
- webpack优化策略
- ast抽象语法树
- 掌握webpack中手写webpack
- 手写webpack中常见的loader
- 手写webpack中常见的plugin‘
目前的话，应该只有前三个内容，之后会继续补充。
3.webpack的安装
1.安装本地的webpack：webpack webpack-cli
yarn add webpack webpack-cli -D
2.webpack可以进行0配置
- 打包工具 -> 输出后的结果 -> （js模块）
- 打包 （支持我们的js的模块化）webpack帮我们解决了一系列的模块化机制
4.手动配置webpack
默认配置文件的名字 webpack.config.js
- 新建文件 webpack.config.js
接下来，将手动配置
1.修改入口，出口文件，以及文件打包目录
2.配置开发/生产模式
//webpack 是node写出来的 所以使用node写法
let path = require('path');
module.exports = {
mode:'development',//模式 默认两种 production development 开发模式下的代码更容易辨识(压缩程度低)
entry:'./src/index.js', //入口文件
output:{
filename:'bundle.js', //打包后的文件名
path: path.resolve(__dirname,'build'), //打包后放置文件的目录（路径必须是一个绝对路径）
}
}
配置脚本：
配置执行打包和服务端运行的快捷指令脚本
package.json中扫描二维码关注公众号，回复： 11948875 查看本文章
"scripts": {
"build": "webpack --config webpack.config.js"
},
------------------------------------------------------------------------------------------------------------------------------------
配置开发服务
我们生成的html只能通过双击打开浏览器的方式查看，现在我们i想要以服务器的方式去访问我们的html页面
webpack内置的开发服务依赖webpack–dev-server (开发时依赖)
安装该依赖：yarn add webpack-dev-server
安装完成以后执行npx webpack-dev-server
访问loaclhost:8080
配置启动服务的快捷脚本 package.json
"scripts": {
"build": "webpack --config webpack.config.js",
"dev":"webpack-dev-server"
},
配置开发服务器的相关信息（webpack.config.js）
//webpack 是node写出来的 所以使用node写法
let path = require('path');
module.exports = {
devServer:{
//开发服务器配置
port:3000,
progress:true, //进度条
contentBase:'./build' //以build文件夹座位静态服务的文件夹
},
mode:'development',//模式 默认两种 production development 开发模式下的代码更容易辨识(压缩程度低)
entry:'./src/index.js', //入口文件
output:{
filename:'bundle.js', //打包后的文件名
path: path.resolve(__dirname,'build'), //打包后放置文件的目录（路径必须是一个绝对路径）
}
}
这样配置好了之后，我们的浏览器端口修改为了3000端口，并且基本目录修改为了build文件夹，这样启动服务器之后，将直接访问index.html文件。
接下来，我们需要在打包的同时生成好html文件（之前的html文件是我们手动创建的），并且将这个html文件放在最终的build目录下
在创建的html模板中插入js文件，打包到build目录
第一个plugin的使用：html-webpack-plugin
安装webpack：yarn add html-webpack-plugin
使用插件html-webpack-plugin
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer:{
//开发服务器配置
port:3000,
progress:true, //进度条
contentBase:'./build' //以build文件夹座位静态服务的文件夹
},
mode:'development',//模式 默认两种 production development 开发模式下的代码更容易辨识(压缩程度低)
entry:'./src/index.js', //入口文件
output:{
filename:'bundle.js', //打包后的文件名
path: path.resolve(__dirname,'build'), //打包后放置文件的目录（路径必须是一个绝对路径）
},
plugins:[ //数组 放着所有的webpack插件
new HtmlWebpackPlugin({
template:'./src/index.html', //plugin插件的模板
filename:'index.html', //plugin插件打包后的文件名
minify:{
removeAttributeQuotes:true, //删除属性的双引号
collapseWhitespace:true //折叠空行
},
hash: true //给生成的js文件增加hash戳，防止缓存
})
]
}
------------------------------------------------------------------------------------------------------------------------------------
接下来我们配置css/less等样式文件的webpack默认配置。
主要使用到了css-loader style-loader 等等
创建好index.css文件后。
在index.js文件里面使用。
index.js
let obj = require('./a.js')
console.log(obj);
console.log('hello webpack');
require('./index.css');
报错如下：
提醒我们需要一个合适的loader来处理。
安装loader yarn add css-loader style-loader 开发依赖
loader的使用规则和作用：
//css-loader 主要负责解析 @import 语法，合并两个css文件
//style-loader 把css插入到head的标签中去
//loader 可以使用字符串， 多个loader使用数组，loader的顺序默认是从右到左执行
//loader 还可以写成对象方式（可以多余传入一些参数）
使用安装的loader：
module:{
//模块
rules:[
{
test:/\.css$/, //匹配css文件
//css-loader 主要负责解析 @import 语法，合并两个css文件
//style-loader 把css插入到head的标签中去
//loader 可以使用字符串， 多个loader使用数组，loader的顺序默认是从右到左执行
//loader 还可以写成对象方式（可以多余传入一些参数）
use:[
{
loader:'style-loader',
options:{
insertAt:'top' //让我们在index.html模板中写的样式的优先级更高
}
},
'css-loader'
]
}
]
}
页面已经添加了样式了。
接下来，我们继续配置css样式，因为我们配置的css目前的形式是将css显示在了html文件的< style >标签内部,所以接下里我们想要抽离CSS，使其成为一个css文件，以link的方式引入。
第二个插件plugin： mini-css-extract-plugin -D(开发依赖)
使用mini-css-extract-plugin。
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename:'main.css'
})
这个插件怎么使用呢？
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}]
可以看到，当我们的css需要打包成一个新的css文件的时候，只需要使用插件的loader方法就可以了。
生成的main.css文件
postcss-loader 实现css样式自动添加浏览器标识头
yarn add posycss-loader autoprefixer
使用 postcss-loader
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}]
需要添加postcss-loader的配置：
postcss.config.js文件
module.exports = {
plugins:[require('autoprefixer')]
}
打包后的css文件结果：
接下来我们要压缩css文件，但是这个插件有个问题，使用这个插件压缩css代码后，js代码不会被压缩了。所以又需要安装一个安装压缩js的插件， uglifyjs-wenpack-plugin
使用插件optimize-css-assets-webpack-plugin
uglifyjs-wenpack-plugin
使用插件：
optimization:{
minimizer:[
new UglifyPlugin({
cache:true,
parallel:true,
sourceMap:true
}),
new OptimizeCss()
]
},
接下来，我们来配置在webpack中配置我们的js，ES6 -> ES5
使用babel将es6转化为es5
安装babel
- babel-loader 进行转化
- @babel/core babel的核心模块
- @babel/preset-env 负责将高级语法转化为低级语法
安装
yarn add babel-loader @babel/core @babel/preset-env
使用babel：
首先我们使用es6的箭头语法定义了一个函数fn。
当我们配置好babel后，重新打包文件，之后打开ijs文件可以看到：
babel已经将我们的es6语法转化为了es5语法；
、
上一节我们实现了如何将高级语法转化为低级语法。
ES6 -> ES5
接下来，我们继续配置ESlint的使用
配置eslint：
{
test:/\.js$/,
use:{
loader:'eslint-loader'
}
},
接下来需要去eslint官网对项目需求进行配置，然后下载对应的eslint.json 导入到项目即可。
--------------------------------------------------------------------------------------------------------
接下来。我们要学习如何再webpack中引入图片，并且对图片进行打包。
需要安装loader（file-loader）作用打包图片
- 在js中创建图片来引入
import logo from './3.gif';
let image = new Image();
image.src = logo;
document.body.appendChild(image);
webpack.config.js配置
{
test:/\.(png|jpg|gif)$/,
use:'file-loader'
},
- 在css中引入background(‘url’)
@import './a.css';
body{
background-color: red;
transform: rotate(45deg);
background: url('./3.gif');
}
css中可以直接去引入图片
- html中引入img
需要使用loader： html-withimg-loader -D
配置如下：
{
test:/\.html$/,
use:'html-withimg-loader'
},
而我们平常处理图片不用file-loader，而用url-loader
限制图片的大小，小于多少k的时候，用base64转化
大于多少k的话就用file-loader来处理。
配置如下：
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 800 * 1024
}
}
},
--------------------------------------------------------------------------------------------------------
接下来我们给打包资源分类
即css,img,font等分类别放在某一个静态资源目录下
只需要在配置rules的时候，在options中添加属性，outputPath即可。
举个例子：image
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 1,
outputPath:'img/'
}
}
},
这样可以看到，打包好的图片放到了对应的img目录下。
接下来我们个ijs，css文件都进行这样的配置。
new MiniCssExtractPlugin({
filename: 'css/main.css'
})
output: {
filename: 'js/bundle.[hash].js',
path: path.resolve(__dirname, 'build'),
},
结果如下。
webpack基本配置 完