webpack

1. webpack 概念:

支持模块化 和 打包 核心功能

• 实现前端模块化开发，支持 CommonJS、AMD、CMD，ES6 方案
• 支持模块化开发，并且帮我们建立，模块之间的依赖关系
• 不仅仅JavaScript是模块化，图片、css、JSON 都可以成为模块化

2. webpack 依赖

• node 环境是执行环境
• npm 是安装node 自动安装，为了 操作 node 的各种操作指令工具

3. webpack 安装

步骤：
一、 查看node 版本：

• node -v

二、 全局安装 webpack (如果使用 vue-cli2 ，最好使用指定版本 3.6.0 )

• npm install webpack@3.6.0 -g

三、局部安装：如果需要使用局部安装

• 使用 npm install webpack@3.6.0 --sabe-dev

为什么全局安装之后，还需要局部安装呢？

• 在终端直接执行 webpack 命令，使用全局安装的 webpack
• 当在 package.json 中定义了 scripts 时，使用中包含了 webpack 命令，那就使用的是 局部安装的 webpack

4. webpack 基本使用

（1） 手动指令打包：

指令构成： webpack 目标文件夹 输出文件夹
指令： webpack src/main.js dist/bundle.js

（2） 配置打包(推荐)

执行 npm init 初始化配置 package.json, 按照流程设置自定义配置，生成webpack配置单

如果配置单内的配置本地不存在，执行 npm install ，webpack 会按照配置单补齐缺失文件

我们后续可以在 " scripts " 内配置执行指令

（3） webpack.config.js 配置

const path = require("path"); :path 是nodeJS 内置的路径依赖，用于拼接当前文件绝对路径

path: path.resolve(__dirname,dist) : reslove 为了拼接当前绝对路径，__dirname 是当前文件绝对路径

/* 引入 路径依赖 : path 属于 node 自带依赖，引入看使用 commonJS 引入 */ const path = require("path");/* 导出配置 */ module.exports = {// 入口文件entry: "./src/main.js",// 输出文件：注意使用path绝对路径output: {path: path.resolve(__dirname,dist), //动态获取绝对路径filename: "bundle.js",}, };

当配置完 webpack.config.js 后就可以直接使用 webpack 打包了，不需要再指定 输入输出路径了

（3）package.json 配置

当我们下载其他人的项目时候，我们需要使用项目需要的 webpack 和 配置版本，防止报错 这时我们就需要使用看到 【局部webpack】配置，只要我们在终端直接起的服务，都是使用的 全局 webpack 为了使用局部 webpack 我们需要再 package.json 内配置启动指令， 这时的指令默认优先使用 局部 配置

“scripts”： 内部可以自定义，webpack 指令，优先使用本地 webpack 减少 执行代码的冗余

{"name": "zhangjian","version": "1.0.0","description": "no","main": "index.js","dependencies": {},"devDependencies": {"webpack": "^3.6.0"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "zhangjian","license": "ISC" }

5. loader 扩展

由于webpack 只能完成基本的 打包 和 处理 js 之间得依赖，我们还需要加载 css/ less/ 图片等，也包括将 ES6 转换为 ES5 的功能， 基础的 webpakage 是不满足的， 这时我们需要 使用 loader 去扩展 webpack 的功能树

(1) loader 使用步骤

大部分的 webpack 的 loader 插件，我们可以在 webpack 的官网找到，并且得到配置的方法

• npm 安装包下进行安装 需要的loader 插件
• 并且在 webpack.config.js 中的 module关键字中， 进行 配置

举例： 安装 css 、less支持插件

需要依赖： 注意此处的 style-loader 和 css-loader 兼容

• style-loader: 将 css 添加到 DOM 上 : npm install style-loader --save-dev
• css-loader : css 模块化处理 : npm install --save-dev css-loader
• 插件读取的顺序，是自 右向左边执行

/* 导出配置 */ /* 引入 路径依赖 : path 属于 node 自带依赖，引入看使用 commonJS 引入 */ const path = require("path");/* 导出配置 */ module.exports = {// 入口文件entry: "./src/main.js",// 输出文件：注意使用path绝对路径output: {path: path.resolve(__dirname, "dist"), //动态获取绝对路径filename: "bundle.js",},module: {rules: [{test: /\.css$/,// 使用多个 loader 从右向左读取use: ["style-loader", "css-loader"],// style-loader: 将 css 添加到 DOM 上//css-loader : css 模块化处理},{test: /\.less$/,use: [{loader: "style-loader", // creates style nodes from JS strings},{loader: "css-loader", // translates CSS into CommonJS},{loader: "less-loader", // compiles Less to CSS},],},],}, };

---

6. 配置-webpack 图片处理

(1) file-loader 和 url-loader

• file-loader : 将文件输出到相应的文件夹，返回 目标的 url （大于 8kb）
• url-loader : 向 file-loader 一样工作，当图片尺寸小于限制值，则返回 url-data (小于8kb)
• html以及css中的图片打包成base64，会减少 hppt 请求次数，比如我们一般会把小于8kb的图片才做base64转换

{test: /\.(png|jpg|gif)$/,use: [options: {当图片小于 8kb的时候，会将图片预编译成 base64字符串形式当图片大于8kb ，需要使用 file-loaer 进行模块加载limit: 192,name: "img/[name].[hash:8].[ext]",},{loader: "file-loader",options: {},},],},

注意： 当 html 打包后和图片资源不在同一个文件夹下的使用，需要指定 publicPath :' dist/ ' 的绝对路径

(2) 配置文件输出名称格式

webpack 输出的文件，帮我们生成了很长的 hash 名称，目的防止重复，在真实开发中要求图片名称 具有规则可读，
所有图片放在同一个文件夹下 ，所以我们在 option 中 添加如下的选项

• img : 文件要打包到的文件夹名称
• name : 获取图片原来的名称，放在需要放置的位置
• hash:8 : 为了防止名称重复冲突，我们保留 8位 hash
• ext : 使用图片原来的扩展名称

注意： 但是我们的图片依旧没有显示出来，因为图片使用的路径不正确

• 默认情况下， webpack 会将生的路径 直接返回给使用者
• 但是我们的整个程序是打包在 dist 下的，所以我们需要指定路径前缀。添加 dist

---

7. 配置 babel- ES6 转化

ES6 很多 浏览器不支持，需要使用 babel 进行转化为 ES5

指令：npm i babel-loader@7 babel-core babel-preset-es2015 -S

在webpack.config.js module -> rules 内配置 loader

{//所有 js 文件转化test: /\.js$/,// 禁止转化 基础依赖exclude: /(node_modules|bower_components)/,use: {loader: "babel-loader",options: {presets: ["es2015"],},},},

---

8.使用Vue.js 准备

.vue 的环境也是基于 node 环境开发的，使用 npm 进行安装 vue 环境 ， 我们使用 webpack 环境中集成的 Vuejs

（1）引入 Vue.js 准备

npm i vue --save （-S） // 在开发环境下安装 vue 依赖

接下里就可以使用 vue了

注意： vue 不借助脚手架时，有两种运行模式可选

• runtime-only : 不运行任何 带 template 的文件
• runtime-compiler : 附带编译器，可以编译运行带 template 文件

在 webpack.config.js 内指定配置依赖类型vue文件

resolve: {/* 配置别名 */alias: {$vue: "vue/dist/vue.runtime.esm.js",},},

---

(2) vue 文件封装处理

9. plugin 必备插件使用

(1) plugin 和 loader 区别

• loader : 针对现有的文件进行转化，是一个转换器
• plugin : 针对现有的 webpack 框架进行功能扩展，是功能扩展器

(2) BannerPlugin 使用

第一步： npm 安装 目标 plugins ( 某些 webpack 内置的 plugin 不需要安装)

第二步： 在 webpack.config.js 中的 plugins 中进行配置

const webpack = require("webpack"); plugins: [new webpack.BannerPlugin("版权归 zhangDaDa 所有！盗版必揪")],

由于是webpack 内置的plugin 所以，无需安装直接使用，打包出来的 bundle.js 就有水印了

(2) HtmlWebPackPlugin 插件

为了将每次打包时，未 放入 dist 的 html 文件，放进去，使用此插件完成自动化

功能：

• 自动生成个，index/html 文件( 可以指定模板来生成)
• 自动将打包的 js 文件，使用 script 标签 插入到 body 内

安装 HtmlWebpackPlugin 插件 ：npm i html-webpack-plugin -S

可以通过配置 webpack.config.js 中的 plugin 部分自定义修改

• 这里 template 表示 html 生成的 源文件
• 另外，我们需要删除掉，output 配置的 publicPath 属性，因为文件夹固定到了 dist

const HtmlWebpackPlugin = require("html-webpack-plugin");plugins: [/* 横幅水印插件 */new webpack.BannerPlugin("版权归 zhangDaDa 所有！盗版必揪"),/* HTML 打包插件 */new HtmlWebpackPlugin({template: "index.html",}),],

(3) js压缩丑化:

当 webpack Verson > 4.0 在 mode: production 生产 模式下，是默认 丑化 js 的，之前的版本需要手动配置

安装：npm i uglifyjs-webpack-plugin@1.1.1 -S

引入plugins且配置:

const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin"); /* JS 代码丑化插件 */new UglifyjsWebpackPlugin(),

10. 配置本地服务器

webpack提供了个可选的本地服务器，基于nodeJS ，内部使用 express 框架，实现我们想让浏览器实现自动刷新的效果

(1) 模块安装 :npm i webpack-dev-server@2.9.1 -S

(2) devserver 配置：

在 webpack.config.js 文件配置修改如下

• contentBase : 为哪个文件夹提供本地服务，默认是根文件夹，这里我们需要设置为./dist
• port: 端口号
• inline : 页面实时 刷新
• historyApiFallback : 在 SPA 页面，依赖 HTML5 的history模式

webpackconfig.js /* 配置本地服务器配置 */devServer: {contentBase: "./dist", // 服务哪个文件夹inline: true, // 是热更新},

package.json 配置自定义启动：npm run server

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","server":"webpack-dev-server --open"},

11. 手动配置单 webpack.config.js

webpack.config.js

/* 引入 路径依赖 : path 属于 node 自带依赖，引入看使用 commonJS 引入 */ const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");/* 导出配置 */ module.exports = {// 入口文件entry: "./src/main.js",// 输出文件：注意使用path绝对路径output: {path: path.resolve(__dirname, "dist"), //动态获取绝对路径(配置 HtmlWebpackPlugin 后删除)filename: "bundle.js",/* 自动默认文件路径前缀(配置 HtmlWebpackPlugin 后删除) */// publicPath: "./",},/* 放置 laoder */module: {rules: [/* css 转换 loader */{test: /\.css$/,// 使用多个 loader 从右向左读取use: ["style-loader", "css-loader"],// style-loader: 将 css 添加到 DOM 上//css-loader : css 模块化处理},/* less loader */{test: /\.less$/,use: [{loader: "style-loader", // creates style nodes from JS strings},{loader: "css-loader", // translates CSS into CommonJS},{loader: "less-loader", // compiles Less to CSS},],},/* 图片处理 loader */{test: /\.(png|jpg|gif)$/,use: [{loader: "url-loader",options: {// 当图片小于 8kb的时候，会将图片预编译成 base64字符串形式// 当图片大于8kb ，需要使用 file-loaer 进行模块加载limit: 192,name: "img/[name].[hash:8].[ext]",},},// {// loader: "file-loader",// options: {},// },],},//ES6 转 ES5{test: /\.js$/,// 排除转化目标文件夹 node_modulesexclude: /(node_modules|bower_components)/,use: {loader: "babel-loader",options: {presets: ["es2015"],},},},],},// reslove 一般是解决路径的问题resolve: {/* 配置别名 */extensions: [".js", ".vue", ".json"], // 解决 文件省 扩展名问题alias: {vue$: "vue/dist/vue.esm.js",},},plugins: [/* 横幅水印插件 */new webpack.BannerPlugin("版权归 zhangDaDa 所有！盗版必揪"),/* HTML 打包插件 */new HtmlWebpackPlugin({template: "index.html",}),/* JS 代码丑化插件 */// new UglifyjsWebpackPlugin(),],/* 配置本地服务器配置(开发阶段需要，后期删除) */devServer: {contentBase: "./dist", // 服务哪个文件夹inline: true, // 是热更新}, };

package.json

{"name": "zhangjian","version": "1.0.0","description": "no","main": "index.js","dependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-preset-env": "^1.7.0","babel-preset-es2015": "^6.24.1","file-loader": "^3.0.1","html-webpack-plugin": "^3.2.0","uglifyjs-webpack-plugin": "^1.1.1","vue": "^2.6.14","webpack-dev-server": "^2.9.1"},"devDependencies": {"css-loader": "^2.0.2","less": "^4.1.1","less-loader": "^4.1.0","style-loader": "^0.23.1","url-loader": "^0.6.2","webpack": "^3.12.0"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","server":"webpack-dev-server --open"},"author": "zhangjian","license": "ISC" }

---

12 vue-cli 使用

(1) 安装

安装：npm i @vue/cli -g

以上装的是 cli3 如果想按照 cli2 方式初始化项目，是不可以的，但是有办法，可以安装一个桥接器，cli 官网有

(2) runtime-only 和 runtime-compiler 区别

两种编译模式的DOM渲染的过程:

runtime-compiler

tempalte解析 -> ast (抽象语法树) -> render() -> v DOM (虚拟DOM) -> 真实DOM ->UI

runtime-only L: 性能更高！ 代码更少

render(组件/createElement) -> V-DOM(虚拟 DOM) ->UI

(3) render() 函数的使用

方式1:

new Vue({el: "#app",// render: h => h(App)render: (createElement) => {方式1// return createElement("标签", "相关数据对象(可以不传)", ["内容数组"]);return createElement("div", { class: "box" }, ["我是内容"]);} });

方式2：创建组件对象，render(组件对象)， 直接渲染

const comp = Vue.component("comp", {template: ` <div>我是comp 组件</div> `,data() {return {msg: "comp组件"};} });new Vue({el: "#app",render: createElement => {return createElement(comp); //传入一个组件对象直接生成} });

(4) cli 运行执行过程原理

npm run build 过程

npm run dev过程

(3) 起别名 alias[]

在 cli2 中 修改build / webpack.base.confi.js 文件，cli3 需要手动 vue.config.js

cli2 配置: webpack.base.confi.js

(4) cli2 和 cli3 区别

发布时间: 2018 年 8:11

• vue-cli3 基于 webpack4 打造的，vue-cli2 基于 webpack3 支持
• vue-cli3 设计原则是0配置，移除了 build 和 config
• vue-cli3 提供了 vue-ui 可视化配置，其实不如指令方便
• 移除了 static 文件夹，新增了 public 文件夹， html 文件移到 public 内

(5) 文件夹功能区域

总结

以上是生活随笔为你收集整理的webpack从0配置和使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。