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配置和使用相关推荐

webpack 4.0 配置方法以及错误解决
webpack 4.0 配置方法以及错误解决参考文章: (1)webpack 4.0 配置方法以及错误解决 (2)https://www.cnblogs.com/qqfontofweb/p/8516 ...
Webpack 4 教程：从0配置到生产模式
原文链接:Webpack 4 Tutorial: from 0 Conf to Production Mode webpack 4 问世了!除了大幅度的性能提升,而且增加了零配置的默认设置. 目录 w ...
webpack从0到1的配置（二）
阅读本篇博客需要预先阅读webpack从0到1的配置(一). 接着上篇博客讲plugins. 我们希望在打包后的项目里有index.html文件,并且自动引入main.js文件这里需要安装插件htm ...
React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
vue-cli3.0配置详解
这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install ...
Vue2.0配置mint-ui踩过的那些坑
Vue2.0配置mint-ui踩过的那些坑最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错, ...
前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web
作者:王下邀月熊编辑:徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅 ...
webpack 3.1 升级webpack 4.0
webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...
webpack 4.0 小记
介绍其实之前也会看一些 webpack 脚手架的配置,但是使用的插件实在是太多了,不了解各个插件的左右是一个很大的瓶颈,所以着手认识认识各大插件. 项目地址,之前一直都是用脚手架工具,最近得闲就学习 ...

webpack从0配置和使用