webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。
一、打包
- 指令： npm run build
- 结果：
1.会将项目中 src 目录下所有的文件进行打包，打包到 dist 目录下
2.目录结构：
- index.html 单页面应用的 html 文件
- static 当前单页应用中所有的静态资源
- css: 当前项目中用到的所有样式文件打包后的结果
- app.css 打包后的所有 css 文件
- app.css.map 打包后的映射文件
- fonts：将所有的字体打包到这个目录
- js：将所有的 js 代码打包到这个目录下
- app.js 打包 js 文件 和 组件
- vender.js 将当前项目用到的所有的第三方包全部进行打包。
3.直接发布到服务器上的
- 缺点：
首屏加载缓慢： 第一次打开页面时加载慢（因为打包后，会将所有的文件打包到统一的 css, js 文件中，第一次请求时，页面就将些文件全部加载好了） - 首屏优化：
- 概念：当我们第一次打开页面时，提升加载速度。
- 原理：由于默认打包时会将所有的文件打包到固定的 js 文件中，加载页面时会将所有内容进行加载，所以慢。可以将这些文件分开打包
*方案：
1）路由的懒加载
方式：
将所有路由导入的方式从：
import Right from ‘@/components/right.vue’
改为：
var Right = ()=> import(’@/components/right.vue’)
结果：
将来所有的路由文件会单独生成一个 js 文件，不会统一打包到 App.js 中
2）第三方包使用 CDN 方式加载
方式：
第一步：在单页中引入所需要的文件（css, js）
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>第二部：在配置文件中配置 第三方包 的相关信息
externals: {
'element-ui' : 'ELEMENT' // 键(第三方包名)： 值(起的别名)
'vue': 'Vue'
}二、webpack 手动搭建项目结构：
官网： webpack 1.0：https://webpack.github.io/
最新官网：https://www.webpackjs.com/
1.概念： JavaScript 应用程序的静态模块打包器
2.作用：
可以从入口文件开始将当前文件引用的所有文件进行打包，将内容生成到统一的 js，css, 图片，字体，sass 文件中。
3.核心概念
loader: 帮助 webpack 打包所有的资源（img, css,js,font,sass,less）
插件： 帮助 webpack 提供一些额外功能（用服务器方式打开项目，热更新。。。）
4. 使用webpack:
1）创建项目
a. 生成 package.json 文件
npm init
b. 完成了一个计算器功能
c. 将方法封装到一个单独的模块中：calc.js
三、webpack 的配置文件项（webpack.config.js）：
说明： 必须创建一个文件名为： webpack.config.js
入口文件：entry: ‘./src/index.js’
出口文件：
output: {
path: '',
filename: ''
}配置模式：
mode:
development
production配置映射文件：
devtool:
inline-source-map： 将源代码信息保存到 build.js 中
source-map：将源代码信息保存到 build.js.map 中配置 resolve:
extensions： 配置可以省略的后缀名
alias：设置别名四、webpack 的打包
1）js 模块化打包
目的：为了能够使用 js 代码模块化
步骤:
1）全局安装 webpack
全局下载： npm i webpack -g
2）使用 webpack 将我们的项目进行打包
在项目目录下执行 cmd 命名： webpack ./main.js
3）由于 webpack 更新太多，不建议使用全局安装，建议使用本地安装
指令：npm i webpack --save-dev
找到 package.json 文件，添加一个打包指令：
“script”: {
“build”: “webpack ./src/main.js”
}
2）打包 css 样式：
步骤：
a. 安装并添加 样式的 loader:
npm install --save-dev style-loader css-loader
b. 配置
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }3）打包 sass 样式
步骤：
a. 书写 sass 文件
b. 安装 loader
c. 配置
4）打包 less 样式
步骤：
a. 书写 less 文件
b. 安装 loader
npm install --save-dev less-loader less
c. 配置
module: {
rules: [{
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
}]
}]
}5）打包图片：
步骤：
a. 安装 Loader
npm install --save-dev file-loader
b. 配置
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}6）打包 js ：将 es6 转为低版本语法
步骤：
a. 安装 loader
cnpm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev
b. 配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}7）打包字体
步骤：
a. 下载 loader （它的 loader 与图片一样， 所以不下载）
b. 配置
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}五、插件：（了解）
1）HtmlWebpackPlugin:
作用：自动生成 index.html
步骤：
1）下载插件
npm install --save-dev html-webpack-plugin
2）配置
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
plugins: [
new HtmlWebpackPlugin({
title: ‘Output Management’
})
]
2）CleanWebpackPlugin
作用：每次打包之前，自动清除之前生成的文件
步骤：
1）下载插件
npm install clean-webpack-plugin --save-dev
2）配置
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
new CleanWebpackPlugin([‘dist’])
3）webpack-dev-server：
作用：将项目以服务的方式打开
步骤：
1）下载插件
npm install --save-dev webpack-dev-server
2）配置: webpack.config.js
devServer: {
contentBase: ‘./dist’
}
3）配置：package.json
script: {
“start”: “webpack-dev-server --open”
}
六、vue-loader
作用：在 webpack 中加载 vue 组件
步骤：
1）下载插件
npm i vue-loader vue-template-compiler --save-dev
2）配置 config
打包规则
{
test: /\.vue$/,
loader: 'vue-loader'
},添加插件
new VueLoaderPlugin()
