webpack基本运用

webpack

当前Web开发面临的困境

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

webpack概述

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

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

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

webpack的基本使用

创建列表隔行变色项目

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

在项目中安装和配置webpack

1. 允许npm install webpack webpack-cli -D命令，安装webpack相关的包
2. 在项目根目录中，创建名为webpack.config.js的webpack配置文件
3. 在webpack的配置文件中，初始化如下配置：

module.exports = {

mode:‘development’//mode用来指定构建模式

}

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

“scripts”:{

“dev”:“webpack” //script节点下的脚本，可以通过npm run执行

}

5. 在终端中允许npm run dev 命令，启动webpack进行项目打包。

配置打包的入口与出口

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

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

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

const path = require(‘path’)//导入node.js中专门操作路径的模块

module.exports = {

entry:path.join(_dirname,’./src/index.js’),//打包入口文件的路径

output:{

path:path.join(_dirname,’./dist’), //打包入口文件的路径

filename:‘bundle.js’ //输出文件的名称

}

}

配置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脚本的引用路径，修改为"/bundle.js"
4. 运行npm run dev命令，重新进行打包
5. 在浏览器中访问http://localghost:8080地址，查看自动打包效果

注意：

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

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

1. 运行npm install html-webpack-plugin -D 命令，安装生成预览页面的插件
2. 修改webpack.config.js文件头部区域，添加如下配置信息：

// 导入生成预览页面的插件，得到一个构造函数

const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

const htmlPlugin = new HymlWebpackPlugin({ // 创建插件的实例对象

template:"./src/index.html", //指定要用到的模板文件

filename:‘index.html’ //指定生成的文件的名称，该文件存在于内存中，在目录中不显示

})

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

module.exports = {

plugins:[htmlPlugin] //plugins数组是webpack打包期间会用到的一些插件列表

}

配置自动打包相关的参数

// package.json中的配置

// --open打包完成后自动打开浏览器页面

// --host配置IP地址

// --port 配置端口

“scripts”:{

“dev”:“webpack-dev-serber --open --host 127.0.0.1 --por 8888”

}

webpack中的加载器

通过loder打包非js模块

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

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

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

webpack中加载器的基本使用

打包处理css文件

1. 允许npm i style-loader css-loader -D 命令，安装处理css文件的loader
2. 在webpack.config.js的module ->rules数组中，添加loader规则如下：

// 所有第三方模块的配置规则

module：｛

rules：[

{test:/.css$/,use:[‘style-loader’,‘css-loader’]}

]

｝

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

注意：

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

打包处理less文件

1. 运行npm i less-loader less -D命令
2. 在webpack.config.js的module ->rules数组中，添加loader规则如下：

// 所有第三方模块的配置规则

module：｛

rules：[

{test:/.css$/,use:[‘style-loader’,‘css-loader’,‘less-loader’]}

]

｝

打包处理scss文件

1. 运行 npm i sass-loader node-sass -D命令
2. 在webpack.config.js的module ->rules数组中，添加loader规则如下：

// 所有第三方模块的配置规则

module：｛

rules：[

{test:/.css$/,use:[‘style-loader’,‘css-loader’,‘sass-loader’]}

]

｝

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

1. 运行npm i postcss-loader autoprefixer -D命令
2. 在项目根目录中创建postcss的配置文件postcss.config.js,并初始化如下配置：

const autoprefixer = require(‘autoprefixer’) //导入自动添加前缀的插件

module.exports = {

plugins:[autoprefixer] //挂载插件

}

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

// 所有第三方模块的配置规则

module：｛

rules：[

{test:/.css$/,use:[‘style-loader’,‘css-loader’,‘postcss-loader’]}

]

打包样式表中的图片和文字文件

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用来指定图片的大小，单位是字节，只有小于limit大小的图片，才会被转为base64图片

Vue单文件组件

传统组件的问题和解决方案

问题

1. 全局定义的组件必须保证组件的名称不重复
2. 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到\
3. 不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏
4. 没有构建步骤限制，只能使用HTML和ES5 JavaScript，而不能使用预处理器(如：Babel)

解决方案

针对传统组件的问题，Vue提供了一个解决方案——只用Vue单文件组件

Vue单文件组件的基本用法

单文件组件的组成结构

• template 组件的模板区域
• script 业务逻辑区域
• style 样式区域

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 from 'vue’来导入vue构造函数
3. 创建vue的实例对象，并指定要控制的el区域
4. 通过render函数渲染App根组件

// 1. 导入Vue构造函数

import Vue from ‘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.json文件配置webpack打包命令

//该命令默认加载项目根目录中的webpack.config.js配置文件

“scripts”:{

//用于打包的命令

“bulid”:“webpack”,

//用于开发调试的命令

“dev”:“webpack-dev-server --open --host 127.0.0.1 —port 3000”

}