1，什么是webpack
webpack 本质上来说，是一个现代js应用的静态模块打包工具
重点：模块，打包
模块 :
项目中会有很多的模块化，便于开发但是webpack就是把项目中所有的不同模块的js文件，打包成一个js文件，把所有不同模块的css文件打包成一个css文件，同理，图片一样，同时会帮我们处理模块间的各种依赖，整合打包
打包 :webpack打包时，会帮我们处理模块间的各种依赖，整合打包成一个或者多个包，并且进行资源处理，比如：压缩图片，将scss转为css，将ES6转为ES5语法等操作
image.png
gulp也可以打包（gulp 称为前端自动化任务管理工具）
使用情况
gulp: 当项目工程模块依赖比较简单，甚至没有用到模块化概念，只需要进行简单的合并，压缩，就使用gulp即可
webpack：项目使用模块化管理，依赖非常强，要使用强大的webpack
区别
gulp: 更加强调的是前端流程的自动化,模块化不是它的核心
webpack：更加强调模块化开发管理,而文件压缩合并,预处理等功能,是它的附带功能
附：将src下面的所有js文件转为ES5的语法，最终输出到dist文件夹中
2，webpackd的安装
1，webpack是基于node.js安装，node.js自带软件打包管理工具npm
2，安装webpack(同时也要安装 webpack-cli )
// 全局进行安装 操作指令：
cnpm install webpack webpack-cli -g
// 本地安装开发者环境， 操作指令：
npm install webpack webpack-cli -save-dev
3，webpack的起步
1，安装了webpack后，我们打包项目命令是：（webpack + 入口文件 + 出口文件 + 开发环境）
webpac ./src/index.js -o ./dist/bundle.js --mode=development // 入口文件 + 出口文件 + 开发环境
2，配置文件
webpack
dist ----打包好的文件放置的位置
src ---资源文件夹
index.js ---入口文件
style.css ---样式文件
protype.js ---这里准备了一个js文件，给vue原型上加一些函数
index.html ---浏览器打开展示的首页
package.json ---通过npm init 生成的配置文件，npm包管理的文件
webpack.config.js --- 专门来配置文件的，webpack一些配置，都是在这个文件中进行配置
3，最后在dist下生成了bundle.js文件，我们把这个js文件引入index.html文件中即可
4，如果每次使用webpack命令都要写入口和出口作为参数，就比较麻烦，所以我们要在webpack.config.js配置好出口与入口，这样我们每次使用webpack指令，就不需要写出口与入口了，请看下面讲解
4，webpack的配置
1，配置
// 绝对路径需要引用的包
let path = require('path')
module.exports = {
mode:"development", // 开发环境
entry:"./src/index.js", // 入口文件
output:{ // 出口文件
filename:"bundle.js", // 输出文件名称
path:path.resolve(__dirname,'dist') // 输出的绝对路径 ——> 这里就要引用 path
}
}
2，操作:在html文件中引入打包好的js文件，运行项目，就可以在浏览器中 看到打印出来的东西了
在项目中，我们会用到 一些样式的引入，进行配置，这样打包时候，我们才能把引入的样式给打包进去，但是 webpack 默认是不可以打包 css 文件的，这时就需要 loader 配置
5，webpack中用到的组件 loader 使用
1，因为这里会用到插件，所以我们要先安装插件 loader
操作指令：npm install style-loader css-loader --save-dev
2，配置
let path = require('path')
module.exports = {
mode:"development", // 开发环境
entry:"./src/index.js", // 入口文件
output:{ // 出口文件
filename:"bundle.js", // 输出文件名称
path:path.resolve(__dirname,'dist') // 输出的绝对路径 ——> 这里就要引用 path
},
module:{ // loader 配置
rules:[ // 对于某个格式的文件进行转换处理
{
test:/\.css$/,
use:[ // use 数组中的 loader 的顺序，是从下到上，逆序执行
'style-loader', // 将js的样式内容插入到style标签中
'css-loader' // 将css文件转换为js
]
}
]
}
}
引入打包好的文件，在控制台，运行起项目，即可
我们每次打包文件都要手动引入文件，比较麻烦；所以安装插件，在打包时，自动完成html与js文件之间关系
6，plugin的使用
由于我们要自动完成 html 与 js 文件之间的关系，所以这里的文件目录也会改变
1，配置文件介绍
webpack2
dist ----打包好的文件放置的位置
src ---资源文件夹
index.js ---入口文件
style.css ---样式文件
protype.js ---这里准备了一个js文件，给vue原型上加一些函数
index.html ---浏览器打开展示的首页
package.json ---通过npm init 生成的配置文件，npm包管理的文件
webpack.config.js --- 专门来配置文件的，webpack一些配置，都是在这个文件中进行配置
2，webpack 打包时候，我们要安装 url-loader html-loader,所以我们要安装此配置
操作指令：npm install url-loader html-loader --save-dev
3，配置
let path = require('path')
// a，安装 html-webpack-plugin, 打包时候，我们要安装此依赖，
// 操作执行的命令：npm install html-webpack-plugin --save-dev，安装时候，可能会影响到 loader 的插件，所以操作完后，还要 npm install
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:"development", // 开发中环境
entry:"./src/index.js", // 入口文件
output:{ // 出口文件
filename:"bundle.js", // 输出文件名称
path:path.resolve(__dirname,'dist') // 输出的绝对路径 ——> 这里就要引用 path
},
module:{ //loader 配置
rules:[ // 对于某个格式的文件进行转换处理
{
test:/\.css$/,
use:[ // use 数组中的 loader 的顺序，是从下到上，逆序执行
'style-loader', // 将js的样式内容插入到style标签中
'css-loader' // 将css文件转换为js
]
},
{
test:/\.(jpg|png|gif)$/, // 对匹配的图片进行处理
loader:'url-loader',
options:{
limit:8*1024, // 如果图片小于 8kb base64处理，减少请求数量，会使的体积更大
esModule:false, // url-loader 的 es6 模块化解析关掉
name:'[hash:10].[ext]' // [hash:10] 取图片hash的前10位 .[ext] 取图片的扩展名
}
},
{
test:/\.html$/,
loader:'html-loader'
}
]
},
plugins:[ // 插件配置 注意 这里是 plugins ，不是plugin，很容易出错
new HtmlWebpackPlugin({
template:'./src/index.html' // 告诉打包模板，要打包的html在哪里，这里写的是 html 文件的位置在哪里
})
]
}
4，当项目打包时用到文件，也要安装一个依赖，file-loader，
操作指令：npm install file-loader --save-dev
以上就是我这周学习的，使用 webpack 搭的服务环境
