什么是webpack
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
webpack 可以干什么
1.可以处理 js 之间互相依赖的关系
2.可以处理 js 的兼容问题
webpack 如何运行？
1.首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
2.webpack 就会去项目的根目录中，查找一个叫做 webpack.config.js 的配置文件
3.找到配置文件后，webpack 就会解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
4.当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
5.如果 webpack 发现既没有 webpack 命令 ，也没有配置文件，他就会报错
重要概念
入口文件（entry point）
webpack工作开始的地方，就是一个js文件。webpack通过这个文件内的import，收集其他模块文件，在通过其他模块文件内的import语句，收集其他依赖，最后将所有模块文件打包到一起，形成一个整体可运行的代码。 默认的入口文件是 src/index.js。
输出文件（output）
output就是webpack通过build过程打包后形成的文件。默认的输出文件夹为根目录下的dist/文件夹。
加载器（loaders）
loaders是一些第三方扩展包，可以帮助webpack处理加载各种类型的文件。例如有处理css、image文件的loaders。如果没有loaders，webpack本身是不支持css文件的。
插件（plugins）
plugins也是第三方插件，它可以改变webpack的工作方式，例如有些插件可以设置webpack的环境变量。
模式（mode）
webpack有两种工作方式：development（开发模式）和production（生产模式）。 主要的区别就是production模式下，产生的捆绑包（文件）更小，去掉了在运行下无关的注释，空格等等。这样可以加快用户加载代码的速度。
使用 webpack-dev-server 自动打包
1.安装webpack-dev-server
//此安装方法为本项目安装，不可全局使用，无法把它当做脚本命令
npm i webpack-dev-server -D
//想在 powershell 终端中直接运行，必须安装到全局
npm i webpack-dev-server -g
2.在本地运行 webpack-dev-server
//在package.json 配置脚本命令
{
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server" // 配置一个名为 dev 的脚本指令
},
"devDependencies": {
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
}
注意:
webpack-dev-server 这个工具是依赖于 webpack 的，要想使用这个工具，就必须安装 webpack
webpack-dev-server 打包的文件会直接存放在内存中
3.添加参数
第一种方法：
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" // 添加参数
它其实会开启一个本地的服务器
--open 表示：保存时重新打包，并打开浏览器
--port端口号 表示：开启本地服务器的访问端口号
--contentBase路径 表示：指定根路经
--hot 表示：更新打包文件（不是重新创建打包文件），可以实现网页无刷新直接浏览效果
第二种方法：
在 webpack.config.js 文件中进行配置
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.join(__dirname,'./src/main.js'),//入口文件
output: {
path: path.join(__dirname,'/dist'),
filename: 'bundle.js' //指定输出的名称
},
devServer: {
open: true,
port: 3000,
contentBase: 'src',
hot: true
},
//热更新插件
plugins:[
new webpack.HotModuleReplacementPlugin()
]
}
与第一种方式不一样，使用 webpack 的热更新必须还要加上两步
1.引用 webpack 模块
2.配置插件
//plugins ：是专门放 webpack插件 的地方
webpack的简单配置
方法一：通过命令打包文件（不推荐）
webpack 要打包的文件路径 打包输出的文件路径
方法二：通过 webpack.config.js 配置文件来打包文件
let path = require('path');
module.exports = {
entry: path.join(__dirname,'./src/main.js'),//入口文件
output: {
path: path.join(__dirname,'./dist'), //输出文件的路径
filename: 'bundle.js' //指定输出的文件名
}
}
使用 html-webpack-plugin 插件
这是一个webpack插件，可以简化HTML文件的创建，并且可以将你指定的打包的文件自动插入到页面中去
//安装
npm i --save-dev html-webpack-plugin
//webpack.config.js 导入要使用的插件
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin') // 引用你要使用的插件
module.exports = {
entry: path.join(__dirname,'./src/main.js'),//入口文件
output: {
path: path.join(__dirname,'/dist'),
filename: 'bundle.js' //指定输出的名称
},
devServer: {
open: true,
port: 3000,
contentBase: 'src',
hot: true
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new htmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'), // 配置你要在内存中生成的模板文件
filename:'index.html' // 指定内存中的文件名
})
]
}
处理css样式表
webpack 默认只会处理 js 文件，所以在处理其他文件时我们需要安装一些第三方的 loader 加载器
如果我们想要打包处理 css 文件，我们需要安装 style-loader 、 css-loader 这两个插件
//安装
npm i style-loader css-loader -D
//使用
//1.在 webpack.config.js 先导入 style-loader 、 css-loader
//2.在 webpack.config.js 配置文件中新增一个配置节点，叫做 module ，它是一个对象，在这个 module 对象上，有一个 rules 属性，它是一个数组，这个数组中存放了所有第三方文件的匹配和处理规则
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname,'./src/main.js'),//入口文件
output: {
path: path.join(__dirname,'/dist'),
filename: 'bundle.js' //指定输出的名称
},
plugins:[
new htmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
],
module: { // 这个节点，用于配置所有第三方模块加载器
rules:[ // 所有第三方模块 匹配规则
{
test: /\.css$/, // 匹配以.css文件结尾的文件
use: ['style.loader','css-loader'] // 指定要处理的.css文件的加载器
}
]
}
}
处理 less 文件
//安装
npm i less -D
npm i less-loader -D
//使用
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')
console.log(htmlWebPackPlugin);
module.exports = {
entry: path.join(__dirname,'./src/main.js'),//入口文件
output: {
path: path.join(__dirname,'/dist'),
filename: 'bundle.js' //指定输出的名称
},
plugins:[
new htmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
],
module: { // 这个节点，用于配置所有第三方模块加载器
rules:[ // 所有第三方模块 匹配规则
{
test: /\.css$/, // 匹配以.css文件结尾的文件
use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
}
]
}
}
处理 css 文件中的 url 地址
在默认情况下， webpack 是无法处理 css 文件中的 url 地址，不管是图片还是字体库，只要是 url 地址，就处理不了
因此我们需要 url-loader、 file-loader ，因为 url-loader 依赖 file-loader
//安装
npm i url-loader file-loader -D
//使用
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')
console.log(htmlWebPackPlugin);
module.exports = {
entry: path.join(__dirname,'./src/main.js'),//入口文件
output: {
path: path.join(__dirname,'/dist'),
filename: 'bundle.js' //指定输出的名称
},
plugins:[
new htmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
],
module: { // 这个节点，用于配置所有第三方模块加载器
rules:[ // 所有第三方模块 匹配规则
{
test: /\.css$/, // 匹配以.css文件结尾的文件
use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.(jpg|png|gif|bmg|jpeg)$/,
use: 'url-loader'
}
]
}
}
url-loader 默认会将图片设置为 base64 进行传递，如果不想设置为 base64 就需要我们将 use:'url-loader' 设置为 use:'url-loader?limit=7631&name=[name].[ext]'
在 url-loader 设置参数，就像我们浏览器中的url地址一样
我们使用 limit 进行设置， limit 后面的值必须设置成小于图片的大小（单位是：字节 byte），这样图片就会以 url 的形式进行传输，否则图片就会被转为 base64格式的字符串进行传值
而后面的 name 参数是对客户端浏览器中的文件名进行设置，会将浏览器中图片文件名设置成路径中一样的文件名，因为经过上面的步骤只会将图片的路径设置成hash值
处理字体图片的url路径
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname,'./src/main.js'),//入口文件
output: {
path: path.join(__dirname,'/dist'),
filename: 'bundle.js' //指定输出的名称
},
plugins:[
new htmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
],
module: { // 这个节点，用于配置所有第三方模块加载器
rules:[ // 所有第三方模块 匹配规则
{
test: /\.css$/, // 匹配以.css文件结尾的文件
use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: 'url-loader'
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
use:'url-loader'
}
]
}
}
//将网页中要使用到字体图片后缀名 ttf、 eot、 svg、 woff、 woff2 进行配置
处理 ES6 的高级语法
在 webpack 中，默认只能处理一部分 ES6 的语法，一些更高级的 ES6 语法 语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要借助于第三方的 loader ，来帮助 webpack 处理这些高级的语法，而第三方的 loader 把高级语法转为低级语法之后，会把结果交给 webpack 去打包到我们要打包的文件中
而我们通过 Babel，可以帮我们将高级的语法转换为低级的语法
在 webpack 中，必须装两套包，才能实现将高级语法转为为低级语法的功能
第一套
babel-core 、 babel-loader 、 babel-plugin-transform-runtime
第二套
babel-preset-env 、 babel-preset-stage-0
//安装
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
//在webpack.config.js 文件中配置处理 ES6 的高级语法
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname,'./src/main.js'),//入口文件
output: {
path: path.join(__dirname,'/dist'),
filename: 'bundle.js' //指定输出的名称
},
plugins:[
new htmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
],
module: { // 这个节点，用于配置所有第三方模块加载器
rules:[ // 所有第三方模块 匹配规则
{
test: /\.css$/, // 匹配以.css文件结尾的文件
use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
},
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: 'url-loader'
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
use:'url-loader'
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/ //这是配置 Babel 来转换 ES 的语法
}
]
}
}
注意：
在配置 babel 的 loader 规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉，原因有两个：
1.如果不排除 node_modules ，则会把 node_modules 中所有的第三方 JS 文件都打包编译，这样会非常消耗CPU，同时，打包速度非常慢；
2.如果不加上，最终，Babel 把 所用 node_modules 中的 JS 转换完毕了，但是项目依然是无法正常运行的
而后，我们必须还要在项目的根目录中，新建一个叫做 .babelrc 的 Babel 配置文件，这个配置文件，属于 JSON 格式，所以，在写 .babelrc 配置的时候，必须符合 JSON 语法规范；不能写注释，字符串必须用双引号，而该文件中写如下内容：
{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"]
}
