什么是 webpack ?
。。。。此
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。
webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性,使得整个系统扩展性很好、
webpack 核心概念
Entry
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。
Output
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。
基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。
Module
模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk
代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
Loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
Plugin
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。
插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
注意
webpack ------ 打包流程 简单总结
压缩代码 ，流程 都是普遍的 可以互相的参考去打包 项目
注意：【打包过后的运行:
执行打包命令 npm run build 会产生 dist 文件
查看不能右击打开 会产生一个新的小服务器 来打开 但是不能直接的打开
因为发布后 是线上的服务器环境
需要安装一下 下面这个插件
然后使用 live servre 打开 就会打开在线上的服务器上
但是 打开也是白屏 不会报错】
首先 打包的第一步 创建 vue.config.js 的文件 （也就是跨域的文件）有的话直接使用 没有的话就创建文件夹
注意：vue.config.js文件名不可以改变 文件就是可以修改 webpack 的配置 脚手架会有配置 但是是自己生成的配置 （并不完善或者说不符合我们的要求）
当我们自己创建vue.config.js 的话会自动覆盖之前脚手架自己 已经有的配置 如果没有就 修改【vue.config.js 是打包工具 、自动化构建工具】
引入
一系列配置
1、新建vue.config.js,设置静态资源路径为’./’,否则打包后项目无法运行
module.exports = {
publicPath: "./" //路径
}
必须要有 下面这一步骤
因为 打包后的文件 用的 是绝对路径 / 开头的
但是我们应该用的是相对路径 ./ 所以需要我们手动的修改
*也就是下面 的步骤 *
修改 在运行后 会自动的省略 ./ 的这个路径 但是 ./ 是可以省略的
但是 / 也就是跟目录 不可以 直接省略掉
2、关闭生产环境下的SourceMap映射文件,包的大小减少80%；
productionSourceMap 代表的是 我们 打印的
会去除 所有的map 文件 项目会正常的 运行 但是
但是 当我们 的项目有报错的时候 就不会 告诉 我们 具体 的 报错 位置
因为没有 SourceMap 文件
设置 为 true 的话就会 告诉 我们 报错 在哪里 并且 有源码的提示
项目上线的时候我们也就 不需要用 SourceMap 的文件了
module.exports = {
productionSourceMap: false, //false 表示关闭状态
}
关闭过后的 dist 项目体积就会缩小 但是 会正常的运行
3、跨域 。。。。src
4、配置 alias 别名 （vue.config.js文件中）
配置 alias 别名 开发基础就要配置
相当于 给模块 另外的 起一个名字 固定的代码部分
//加载path模块
//固定不变的 内容 *****************
const path = require('path') //自动有的 内置的
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)
module.exports = {
chainWebpack: config => {
// 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
}
}
配置完成后，我们在项目中可以这样写路径
之前这么写
import Home from '../views/Home.vue'
配置alias别名后
import Home from 'views/Home.vue'
也可以这么写
import Home from '@/views/Home.vue'
5、使用CDN加速优化
cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：
注意：我们引入的版本库尽量根我们使用的版本一致
const isProduction = process.env.NODE_ENV === 'production';
// externals
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
vant: 'vant',
axios: 'axios'
}
// CDN外链，会插入到index.html中
const cdn = {
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
css: ['https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css'],
js: [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js'
]
}
}
module.exports = {
configureWebpack: config => {
// 为生产环境修改配置...
if (isProduction) {
// externals
config.externals = externals
}
},
chainWebpack: config => {
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config.plugin('html').tap(args => {
if (isProduction) {
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
return args
})
}
}
然后在pubilc/index.html文件中添加：
<!-- 使用CDN的CSS文件 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) {
%>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) {
%>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
6、路由懒加载
在配置我们路由时，我们可以使用路由懒加载，当我们切换到这个路由时，才会加载这个页面。
我们可以在路由规则中配置如下:
{
path: '/',
// 路由
name: 'Home',
// 路由名称
component: () => import("@/views/Home.vue")
// 使用这种方式来实现路由懒加载
}
7、去除console.log()打印以及注释
使用插件：
cnpm install uglifyjs-webpack-plugin --save-dev
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
configureWebpack: config => {
const plugins = [];
if (isProduction) {
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
}
})
)
}
}
8、图片懒加载
我们可以利用框架中的图片懒加载，如果PC端就可以使用element，移动端可以使用vant