当前Web开发面临的困境

• 文件依赖关系错综复杂
• 静态资源请求效率低
• 模块化支持不友好
• 浏览器对高级JavaScript特性兼容程度低
• etc……

webpack概述

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。

webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容性问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。

 webpack的基本使用

-1、创建列表隔行变色项目

• 新疆项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
• 创建 src 源代码目录
• 新建 src => index.htnl首页
• 初始化首页基本的结构
• 运行 npm install jquery -S 命令，安装jQuery
• 通过模块化的形式，实现列表隔行变色的效果

-2、在项目中安装和配置webpack

　　1、运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包

　　2、在项目根目录中，创建名为 webpack.config.js 的webpack 配置文件

　　3、在 webpack 的配置文件中初始化如下基本配置：

moudle.exports = {
　　mode: \'development\' // mdoe用来指定构建模式 development production（会压缩）
}

　　4、在package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
　　"dev": "webpack" //script 节点下的脚本，可以通过 npm run 执行
}

　　5、在终端运行 npm run dev 命令。启动 webpack 进行项目打包。

-3、配置打包的入口与出口

webpack的4.x版本中默认约定：

• 打包的入口文件为 src => index.js
• 打包的输出文件为 dist => main.js

如果要修改打包的入口与出口，可以在 webpack.config.js 中心增如下配置信息：

const path = require(\'path\') //导入node.js 中专门操作路径的模块
module.exports = {
　　entry: path.json(_dirname, \'./src/index.js\'), // 打包入口文件的路径
　　output: {
　　　　path: peth.json(_dirname, \'./dist\'), //输出文件的存放路径
　　　　filename: \'bundle.js\' //输出文件的名称
　　}
}

-4、配置webpack的自动打包功能

　　1、运行 npm install webpack-dev-server -D 命令，安装支持项目打包的工具

　　2、修改package.json => scripts 中的 dev 命令如下:

"scripts": {
　　"dev": "webpack-dev-server" //script节点下的脚本 可以通过npm run执行
}

　　3、将 src => index.html 中，script 脚本的引用路径，修改为 “buldle.js“

　　4、运行 npm run dev 命令，重新进行打包

　　5、在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：

1. webpack-dev-server 会启动一个实时打包的 http 服务器
2. webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

-5、配置 html-webpack-plugin 生成预览页面

　　1、运行 npm install html-webpack-plugin -D 命令，安装生成预览页面的插件

　　2、修改 webpack.config.js 文件头部区域，添加如下配置信息：

//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require(\'html-webpack-plugin\')
const htmlPlugin = new HtmlWebpackPlugin({  // 创建插件的实例对象
　　template: \'./src/index.html\',  //指定要用到的模板文件
　　filename: \'index.html\'  //指定生成的文件名称，该文件存在于内存中，在目录中不显示
})

　　3、修改webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：

module.exports = {
　　plugins: [htmlPlugin] //plugin 数组是 webpack 打包期间会用到的一些插件
}

-6、配置自动打包相关的参数

在自动打包好后自动浏览

// package.json 中的配置
// --open 打包完成后自动打开浏览器页面
// --host 配置 IP 地址
// --port 配置端口
"secipt": {
　　"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

 webpack中的加载器

-1、通过 loader 打包非js模块

在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载其才可以正常打包，否则会报错！

loader 加载器可以协助 webpack 擦包处理特定的文件模块，比如：

• less-loader 可以打包处理 .less 相关的文件
• scss-loader 可以打包处理 .lscss 相关的文件
• url-loader 可以打包处理 css 中与url 路径相关的文件

-2、loafer的调用过程

 webpack中加载器的基本使用

• CSS
• LESS
• SCSS
• PostCSS
• JavaScript
• Image/Font
• Vue

-1、打包处理css文件

　　1、运行npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader

　　2、在 wenpack.config.js 的 module => rules 数组中，添加 loader 规则如下：

// 所有第三方文件模块的匹配规则
modul: {
　　rules: [
　　　　{ test: /\.css$/, use: [ \'style-loader\' , \'css-loader\' ] }
　　]
}

其中， test 表示匹配的文件类型， use 表示对应要调用的 loader

注意：

• use 数组中指定的 loader 顺序是固定的 
• 多个 loader 的调用顺序是：从后往前调用

-2、打包 less 文件

　　1、运行 npm i less-loader less-D 命令

　　2、在webpack.config.js 的 module => rules 数组中，添加 loader 规则如下：

// 所有第三方文件的模块匹配规则
module: {
　　rules: [
　　　　{ test: /\,less$/, use: [\'style-loader\', \'css-loader\', \'less-loader\' ] }
　　]
}

-3、打包 scss 文件

　　1、运行 npm i sass-loader  node-sass -D 命令

　　2、在webpack.config.js 的 module => rules 数组中，添加 loader 规则如下：

// 所有第三方文件的模块匹配规则
module: {
　　rules: [
　　　　{ test: /\,scss$/, use: [\'style-loader\', \'css-loader\', \'sass-loader\' ] }
　　]
}

-4、配置postCSS自动添加css的兼容前缀

　　1、运行 npm i postcss-loader autoprefixer -D 命令

　　2、在项目根目录中创建 postcss 的配置文件 postcss.config.js ，并初始化如下配置：

const autoprefixer = require(\'autoprefixer\') // 导入自动添加前缀的插件
module.eports = {
    plugins: [ autoprefixer ] // 挂载插件
}

　　3、在 webpack.config.js 的 module => rules 数组中，修改 css 的 loader 规则如下：

module: {
　　rules: [
　　　　{ test: /\,scss$/, use: [\'style-loader\', \'css-loader\', \'postcss-loader\' ] }
　　]
}

-5、打包样式表中的图片和字头文件

　　1、运行 npm i url-loader file-loader -D 命令

　　2、在 webpack.config.js 的 module => rules 数组中，添加 loader 规则如下：

module:{
　　rules: [
　　　　{
　　　　　　test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
　　　　　　use: \'url-loader?limit=16940\'
　　　　}
　　]
}

　　其中 ？ 之后的是loader的参数项

　　limit 用来制动图片的大小，单位是字节（type），只有小于 limit 大小的图片，才会被转为 base64 图片

-6、打包处理js文件中的高级语法

　　1、安装 babel 转换器相关的包： npm i babel-loader @babel/core @babel/runtime -D

　　2、安装 babel 语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

　　3、在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：

module.exports = {
　　presets: [ \'@babel/preset-env\' ],
　　plugins: [ \'@babel/plugin-transform-runtime\', \'@babel/plugin-proposal-class-properties\' ]
}

　　4、在 webpack.config.js 的 module => rules 数组中，添加 loader 规则如下：

// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
{ test: /\.js$/, use: \'babel-loader\', exclude: /node_modules/ }

 webpack中配置Vue组件的加载器

　　1、运行 npm i vue-loader vue-template-compiler -D 命令

　　2、在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：

const VueLoaderPlugin = require(\'vue-loader/lib/plugin\')
module.exports = {
　　module: {
　　　　rules: [
　　　　　　//...其他规则
　　　　　　{ test:/\.vue$/, loader: \'vue-loader\' }
　　　　]
　　},
　　plugins: [
　　　　//...其他插件
　　　　new VueLoaderPlugin() //请确保引入这个插件
　　]
}

在webpack项目中使用Vue

　　1、运行 npm i vue -S 安装 vue

　　2、在 src => index.js 入口文件中，通过 import Vue form ‘vue’ 来导入 vue 构造函数

　　3、创建 vue 的实例对象，并指定要控制的 el 区域

　　4、通过 render 函数渲染 App 根组件

//1、导入 Vue 构造函数
import Vue form \'Vue\'
//2、导入 App 根组件
import App from \'./components/App.vue\'

const vm = new Vue({
　　//3、指定 vm 实例要控制的页面区域
　　el: \'#app\',
　　//4、通过 render 函数，把指定的组件渲染到 el 区域中
　　render: h => h(App)
})

webpack打包发布

上线之前需要通过webpack 将应用进行整体打包，可以通过 package.json 文件配置打包命令：

// 在package.jaon 文件配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
"script": {
　　//用于打包的命令
　　“build”: "webpack -p",
　　// 用于开发调试的命令
　　“dev”: "webpack-dev-server --open -- host 127.0.0.1 --port 3000"
}