Webpack是做什么的

Webpack的作用

当前web开发面临的困境
1. 文件依赖关系错综复杂
2. 静态资源请求效率低
3. 模块化支持不友好
4. 浏览器对高级JavaScript特性兼容度较低
Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
核心概念 :
1. 入口(entry) :
  webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据
2. 输出(output)
  出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。
3. 加载器（loader）
  webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。
4. 插件(plugins)
  插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率
安装 : webpack支持全局安装和本地安装，官方推荐是本地安装，我们按照官方的来.
1. 语法 : npm install webpack webpack-cli --save-dev

Webpack的使用

在项目中安装和配置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脚本
```
"script": {"dev": "webpack"  //script节点下的脚本可以通过npm run执行
}
```
5. 在终端中运行 npm run dev 命令, 启动webpack进行项目打包

Webpack的更多细节

配置打包的入口和出口

webbpack的4.0版本中默认约定:
1. 打包的入口文件为 src -> index.js
2. 打包的输出文件为 dist -> main.js

修改默认配置

const path = require('path')
module.exports = {mode: 'development',   //mode 用来指定构建模式entry: path.join(__dirname, './src/index.js'),  //入口文件, __dirname指文件的根目录output: {path: path.join(__dirname, './dist'),   //输出文件的路径filename: "build.js"    //输出文件的名称}
}

配置webpack的自动打包功能
1. 运行npm install webpack-dev-server -D 命令, 安装支持项目自动打包的工具
2. 修改 package.json -> scripts中的dev命令
```
"script": {"dev": "webpack-dev-server"
}
```
3. 将src->index.html中, script脚本的引用路径, 修改为’/build.js’
4. 运行 npm run命令, 更新进行打包
配置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文件中向外暴露的配置对象, 新增如下配置节点
```
plugins: [htmlPlugin ]
```
配置自动打包相关的参数

scripts: {"dev": "webpacck-dev-server --open --host 127.0.0.1 --port 8089"
}

webpack中的加载器
1. 通过loader打包非js模块
  1. webpack默认只能打包处理以.js后缀名结尾的模块, 其他非 .js后缀名结尾的模块, webpack默认处理不了, 需要调用loader加载器才可以正常打包, 否则会报错.
2. loader加载器的使用
  1. less-loader 可以打包处理 .less 相关的文件
  2. sass-loader 可以打包处理 .scss 相关的文件
  3. url-loader 可以打包处理css中与url路径相关的文件
3. 打包处理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']}]
}
```
  3. 注意
    1. test表示匹配的文件类型, use表示对应要调用的loader
    2. use数组中自定的loader顺序是固定的
    3. 多个loader的调用顺序的从后往前调用
4. 打包处理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']}]
}
```
5. 配置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数组中, 修改css的loader规则
```
module: {rules: [{test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss -loader']}]
}
```
6. 打包样式表中的图片和字体文件
  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' }]
}
```
7. 打包处理js文件中的高级语法
  1. 安装bable转换器相关的包: 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并初始化基本配置如下:
```
model.exports = {presets: [ '@babel/preset-env' ],plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}
```
  4. 在webpack.config.js的 module -> rules 数组中, 添加loader规则如下:
```
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
```

Vue在Webpack中的使用

Vue单文件组件的基本用法
1. 单文件组件的组成结构
  1. template 组件的模版区域
  2. script 业务逻辑区域
  3. style 样式区域使用scoped关键字防止样式冲突
```
<template><div><h1>这是App的根组件</h1></div>
</template>
<script>export default {data() {return {}},methods: {}}
</script>
<style scoped>h1 {color: red;}
</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')
reules: {test: /\.vue$/, loader: 'vue-loader'}
plugins: { new VueLoaderPlugin()  }
```
使用Vue
1. 运行 npm i vue -S 安装vue
2. 在src -> index.js 入口文件中, 通过import Vue from 'vue’来导入vue构造函数
3. 创建vue的实例对象, 并指定要控制的el区域
4. 通过render函数渲染App根组件
简单版的webpack打包
1. 通过package.json文件添加命令
```
"bulid": "webpack -p"
```

Webpack是做什么的相关推荐

如何通过 Vue＋Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
webpack 占位符_通过示例学习Webpack：占位符图像模糊
webpack 占位符 by Kalalau Cantrell 通过Kalalau Cantrell 通过示例了解Webpack:占位符图像模糊 (Learn Webpack by Example: ...
Webpack系列-第一篇基础杂记
系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记前言公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然 ...
前端进阶（一）webpack 概述
webpack 概述本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系 ...
webpack组织模块的原理 - 基础篇
现在前端用Webpack打包JS和其它文件已经是主流了,加上Node的流行,使得前端的工程方式和后端越来越像.所有的东西都模块化,最后统一编译.Webpack因为版本的不断更新以及各种各样纷繁复杂的配 ...
webpack 优化笔记
优化可以从哪些方面入手 1.优化开发体验优化构建速度,项目庞大时构建的耗时比较久优化使用体验,通过自动化手段完成一些重复工作 2.优化输出质量减少用户感知到的加载时间,即首屏加载时间提升流畅度 ...
【提高系列】webpack相关知识
这次我们主要研究的是webpack框架的相关知识,webpack是一个打包构建的前端框架,用于解决前端开发的模块化问题. 应用场景和纵向比较说到webpack,肯定你还会想到gulp和grunt这些 ...
vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题. segementfalut链接在这里版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2 ...

Webpack是做什么的

Webpack的作用

Webpack的使用

Webpack的更多细节

Vue在Webpack中的使用

Webpack是做什么的相关推荐

最新文章

热门文章