webpack：vue项目的打包优化

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()