webpack基础篇搭配（Vue + Element）

webpack前端项目构建工具

1. 当前 Web开发面临的困境

• 文件依赖关系错综复杂
• 静态资源请求效率低
• 模块化支持不友好
• 浏览器对高级Javascript 特性兼容程度较低
• etc…

2.webpack概述

webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。

webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，

从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。

3. webpack的基本使用：

3.1 创建列表隔行变色项目

1. 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
2. 新建src源代码目录
3. 新建src-> index.html 首页–index.js文件
4. 初始化首页基本的结构
5. 运行 npm install jquery –S命令，安装jQuery
6. 通过模块化的形式，实现列表隔行变色效果

index.html

先暂时引入：<script src="./index.js"></script>

<ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
    <li>这是第7个li</li>
    <li>这是第8个li</li>
    <li>这是第9个li</li>
</ul>

index.js

import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor', 'pink')
$('li:even').css('backgroundColor', 'red')
})

编写上述代码后，打开index.html发现没有隔行变色的效果。因为有兼容性问题我们还需要安装webpack，它会自动生成dist/main.jsmain.js是经过webpack转换之后输出得到的

3.2 在项目中安装和配置 webpack

1. 运行npm install webpack webpack-cli –D命令，安装webpack 相关的包

   运行 npm install webpack webpack-cli –D 命令
   
   有时会报错code ENOSELF
   
   解决方法：找到package.json,修改里面的name属性值就可以了
           默认：name:'webpack' 修改为 name:'my' 
           
   再次运行npm install webpack webpack-cli –D
   

2. 在项目根目录中，创建名为 webpack.config.js的 webpack配置文件

3. 在 webpack的配置文件中，初始化如下基本配置：

   module.exports = {
   // 编译模式
   // development表示开发模式，此模式下main.js文件没有压缩！
   // production 表示上线模式，此模式下main.js文件被压缩了！
     mode: 'development' // mode 用来指定构建模式
   }
   

4. 在 package.json配置文件中的 scripts 节点下，新增 dev 脚本如下：

   "scripts": {
   "dev": "webpack" 
   }
   

5. 在终端中运行 npm run dev命令，启动 webpack进行项目打包。

3.3 最终代码演示：隔行变色

因为原先的index.js有兼容性问题，需要经过webpack工具进行转换它会自动生成dist/main.js；

main.js是经过webpack转换之后输出得到的

index.html

重新引入js文件：<script src="../dist/main.js"></script>

<ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
    <li>这是第7个li</li>
    <li>这是第8个li</li>
    <li>这是第9个li</li>
</ul>

index.js

import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor', 'pink')
$('li:even').css('backgroundColor', 'red')
})

3.4 配置打包的入口与出口

webpack 的 4.x版本中默认约定：

• 打包的入口文件为 src -> index.js

• 打包的输出文件为 dist -> main.js

• 如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息：

  const path = require('path') // 导入 node.js 中专门操作路径的模块
  
  module.exports = {
    entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
    output: {
      path: path.join(__dirname, './dist'), // 输出文件的存放路径
      filename: 'bundle.js' // 输出文件的名称
    }
  }
  
  

• 然后运行npm run dev执行package.json文件中dev脚本 "dev": "webpack"，从而运行webpack
  最后将index.html中的js引入文件：

  <script src="../dist/bundle.js"></script>
  

每次修改代码，都需要执行npm run dev才可以看到效果，太麻烦了！所以我们需要自动打包功能

3.5 配置 webpack的自动打包功能

1. 运行 npm install webpack-dev-server –D 命令，安装支持项目自动打包的工具

2. 修改 package.json -> scripts 中的dev命令如下：

   "scripts": {
     "dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行
   }
   

3. 将 src -> index.html中，script 脚本的引用路径，修改为 "/bundle.js“

4. 运行 npm run dev命令，重新进行打包

5. 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：webpack-dev-server会启动一个实时打包的 http服务器

​ webpack-dev-server打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

问题：访问 http://localhost:8080会生成文件目录，我们希望访问这个地址，呈现页面的效果！

​ 所以需要配置html-webpack-plugin生成预览页面

3.6 配置 html-webpack-plugin 生成预览页面

1. 运行 npm install html-webpack-plugin –D 命令，安装生成预览页面的插件

2. 修改webpack.config.js文件头部区域，添加如下配置信息：

   // 导入生成预览页面的插件，得到一个构造函数
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
     template: './src/index.html', // 指定要用到的模板文件
     filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
   })
   

3. 修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：

   module.exports = {
     plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
   }
   

4. 最后运行npm run dev重新执行命令！

5. 问题：我们需要复制网址： http://localhost:8080到浏览器的url地址中，才可以看到效果！太麻烦了

   ​ 我们希望打包完成的一瞬间，自动弹开浏览器，访问这个网址！

    // package.json中的配置
     // 空格--open 打包完成后自动打开浏览器页面
   
     "scripts": {
       "dev": "webpack-dev-server --open"
     },
   

6. 最后运行npm run dev 重新执行命令！

7. 如果需要修改IP地址和端口号，可以进行下面的操作：

   配置自动打包相关的参数：

   // package.json中的配置
     // 空格--open 打包完成后自动打开浏览器页面
     // 空格--host 配置 IP 地址
     // 空格--port 配置端口
     "scripts": {
       "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
     },
   

8. 最后运行npm run dev 重新执行命令！

3.7 webpack中的加载器:

1. 通过loader 打包非js模块

2. 在实际开发过程中，webpack默认只能打包处理以.js 后缀名结尾的模块，

3. 其他非 .js后缀名结尾的模块，webpack默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

4. loader 加载器可以协助 webpack打包处理特定的文件模块，比如：

   • less-loader 可以打包处理 .less 相关的文件
   • sass-loader 可以打包处理 .scss相关的文件
   • url-loader 可以打包处理 css 中与 url路径相关的文件

3.7.1webpack中加载器的基本使用：

如何配置对应的loder,处理下面这些常见的文件类型：

• CSS
• LESS
• SCSS
• PostCSS
• JavaScript
• Image/Font
• Vue

1. 在src/新建css文件夹/1.css文件：

如果我们需要把li前面的小点去掉，需要添加css样式

li{
    list-style: none
}

2. 然后入口文件index.js，

   导入1.css文件 import './css/1.css'
   此时会报错：You may need an appropriate loader to handle this file type

运行过程：

webpack默认只能处理以.js结尾的文件，它发现某个文件的后缀名不是.js,
就会去webpack的配置文件 webpack.config.js中寻找对应的loder来处理这个文件类型，
如果找不到对应的loder，就会报错！

3.7.2 打包处理 css文件：

1. 运行 npm i style-loader css-loader -D 命令，安装处理css文件的 loader

2. 在 webpack.config.js文件中新增 module对象 -> rules 数组中，添加 loader 规则如下：

   其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

   // 所有第三方文件模块的匹配规则
     module: {
       rules: [
         { test: /\.css$/, use: ['style-loader', 'css-loader'] }
       ]
     }
   

3. 最后运行npm run dev 重新执行命令！

注意：

• use 数组中指定的 loader 顺序是固定的：先配置style-loader,再配置css-loader
• 多个 loader 的调用顺序是：从后往前调用

如果匹配到要处理css文件了：
会先把css文件交给css-loader，进行第一步处理；
然后css-loader处理成功之后将处理的结果交给上一个loder（style-loader）进行进一步处理
style-loader处理完成之后，如果前面没有其他的loder了，会把处理的结果交给webpack
webpack帮我们打包合并，这样项目就打包完成了！

3.7.3 打包处理 less文件：

1. 运行 npm i less-loader less -D命令

2. 在webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

   // 所有第三方文件模块的匹配规则
     module: {
       rules: [
         { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
       ]
     }
   

3. 在css/新建1.less文件：

   body{
   margin: 0;
   padding: 0;
   ul{
   margin: 0;
   padding: 0;
   }
   }
   

4. 然后入口文件index.js，

   导入1.css文件

   import './css/1.css'
   

5. 最后运行npm run dev重新执行命令！

3.7.4 打包处理 scss 文件：

1. 运行 npm i sassjs-loader sass.js -D命令

2. 在webpack.config.js的 module -> rules 数组中，添加 loader 规则如下：

   // 所有第三方文件模块的匹配规则
     module: {
       rules: [
         { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sassjs-loader'] }
       ]
     }
   

3. 在css/新建1.scss文件：

   ul {
   font-size: 12px;
   li {
   line-height: 80px;
   }
   }
   

4. 然后入口文件index.js，导入1.css文件

   import './css/1.scss'
   

5. 最后运行npm run dev重新执行命令！

问题：

解决浏览器兼容性问题，在写样式的时候加上不同浏览器厂商的前缀

这样做太麻烦了。所以配置 postCSS自动添加 css的兼容前缀

3.7.5 配置 postCSS自动添加css的兼容前缀：

1. 运行 npm i postcss-loader autoprefixer -D命令

2. 在项目根目录中创建 postcss的配置文件postcss.config.js，并初始化如下配置：

   const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
     module.exports = {
       plugins: [ autoprefixer ] // 挂载插件
     }
   

3. 在 webpack.config.js 的 module -> rules 数组中，修改css的 loader 规则如下：

   module: {
       rules: [
         { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
       ]
     }
   

在index.html新增标签：

<button>测试</button>

在1.css中进行样式设置：

body button {
    color: red
}

4. 最后运行npm run dev重新执行命令！

问题：

如果在1.css样式中添加背景图片1.jpg，会报错！

解决方法：打包样式表中的图片和字体文件

3.7.6 打包样式表中的图片和字体文件

1. 运行 npm i url-loader file-loader -D 命令

2. 在 webpack.config.js的 module -> rules 数组中，添加 loader 规则如下：

   其中 ? 之后的是 loader 的参数项。

   limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为base64 图片

   module: {
       rules: [
         {
           test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
           use: 'url-loader?limit=16940'
         }
       ]
     }
   

3. 在index.html添加标签：

   <div class="app"></div>
   

4. 在1.css进行样式设置：

   .app {
       width: 580px;
       height: 340px;
       background-color: pink;
       background: url('../images/1.jpg')
   }
   

5. 最后运行npm run dev重新执行命令！

3.7.7打包处理 js文件中的高级语法

1. 安装babel转换器相关的包：

   npm i babel-loader @babel/core @babel/runtime -D
   

2. 安装babel语法插件相关的包：

   npm i @babel/preset-env @babel/plugin-transform-runtime  @babel/plugin-proposal-class-properties –D
   

3. 在项目根目录中，创建 babel 配置文件babel.config.js并初始化基本配置如下：

    module.exports = {
       presets: [ '@babel/preset-env' ],
       plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
     }
   

4. 在webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

   • exclude排除项（必须要有，否则会报错）：表示 babel-loader 不需要处理 node_modules 中的 js 文件

   • 为什么添加排除项：node_modules 中的js 文件都是第三包提供的，

     那些文件不需要转换只需要用babel-loader转换自己写的js文件就可以了

   
     { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
   

5. 在index.js定义Person类

   class Person {
       static info = 'aaa'
   }
   console.log(Person.info)
   

6. 最后运行npm run dev 重新执行命令！

Vue单文件组件:都是以.vue结尾的文件

①传统组件的问题和解决方案

问题

1. 全局定义的组件必须保证组件的名称不重复
2. 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
3. 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
4. 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）

解决方案：针对传统组件的问题，Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。

Vue单文件组件的基本用法：单文件组件的组成结构

• template 组件的模板区域
• script业务逻辑区域
• style 样式区域

App.vue单文件组件

  <template>
    <!-- 这里用于定义Vue组件的模板内容 -->
  </template>
  <script>
    // 这里用于定义Vue组件的业务逻辑
    export default {
      data() { return {} }, // 私有数据
      methods: {} // 处理函数
      // ... 其它业务逻辑
    }
  </script>
  <style scoped>
    建议为每个style添加scoped指令，防止组件样式冲突的问题
    /* 这里用于定义组件的样式 */
  </style>

解决单文件组件：以.vue结尾的文件。

1.webpack中配置vue组件的加载器

1. 运行npm i vue-loader vue-template-compiler -D 命令

2. 在 webpack.config.js配置文件中，添加 vue-loader的配置项如下：

   const VueLoaderPlugin = require('vue-loader/lib/plugin')
   module.exports = {
     module: {
       rules: [
         // ... 其它规则
         { test: /\.vue$/, loader: 'vue-loader' }
       ]
     },
     plugins: [
       // ... 其它插件
       new VueLoaderPlugin() // 请确保引入这个插件！
     ]
   }
   

3. 在src/新建components/App.vue文件

   <template>
       <div>
           <h1>这是App根组件</h1>
       </div>
   </template>
   
   
   <script>
       export default {
           data() {
               return {}
           }
       },
       methods: {}
   </script>
   
   
   <style scoped>
       h1{
           color: red
       }
   </style>
   

4. 在index.js中导入：

   import App from './components/App.vue'
   

5. 最后运行npm run dev重新执行命令！

2.在webpack 项目中使用 vue

1. 运行 npm i vue –S安装 vue

2. 在 src -> index.js入口文件中，通过import Vue from 'vue'来导入 vue构造函数

3. 创建 vue 的实例对象，并指定要控制的 el 区域

4. 通过 render 函数渲染App 根组件

   // 1. 导入 Vue 构造函数
   import Vue from 'vue'
   // 2. 导入 App 根组件
   import App from './components/App.vue'
   
   //创建Vue实例对象
   const vm = new Vue({
     // 3. 指定 vm 实例要控制的页面区域（首先在index.html创建<div id="app"></div>）
     el: '#app',
     // 4. 通过 render 函数，把指定的组件渲染到 el 区域中
     render: h => h(App)
   })
   

5. 最后运行npm run dev 重新执行命令！

6. webpack打包发布

   上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令：

   在package.json文件中配置 webpack打包命令，

   该命令默认加载项目根目录中的 webpack.config.js 配置文件

   
      "scripts": {
        // 用于打包的命令（敲一个空格）
        "build": "webpack 空格-p",
        // 用于开发调试的命令
        "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
      },
   

7. 最后运行npm run build重新执行命令！

   运行思路：
   npm run build 之后会执行"webpack -p",此时会读取webpack.config.js 配置文件：
   如：读取入口文件entry、输出文件output,会用到的插件和loader规则，最终会按照我们给定的配置
   把打包好项目生成到dist目录中。
   此时dist里面已经有一些文件了，所以删除dist文件夹
   因为运行npm run build   dist文件夹是自动生成的！
   
   此时dist就是一个成品的项目了，可以将dist文件夹交给后台开发人员，让他进行实践的上线
   发配到服务器上，进行外网公布！
   
   其实真正的打包和发布，比这个更加复杂！！！
   

3. Vue脚手架：

优点：

以命令行的形式快速生成基本vue项目结构简化项目创建流程，

让我们直接上手就可以写代码而不必关心项目是怎么构建出来的

1. Vue脚手架的基本用法：Vue脚手架用于快速生成Vue 项目基础架构，
2. 其官网地址为：https://cli.vuejs.org/zh/
3. 使用步骤：1. 安装Vue脚手架：npm install -g @vue/cli
4. 运行vue -V检查脚手架是否安装成功和查看脚手架的版本号

基于3.x版本的脚手架创建vue项目

1. 基于 交互式命令行 的方式，创建 新版 vue 项目（掌握，比较麻烦）

   • 在cmd窗口：vue create my-project

     my-project是项目名称，自定义的
     但是项目名称：必须是英文不能包含中文和一些特殊的字符和符号

   • 然后窗口提示：（可以通过上下箭头选择）

     • default（babel,eslint） 默认方式创建项目

     • Manually select features 手动方式选择某些功能创建项目

       选择手动创建后：通过上下箭头选择要安装的功能，然后敲空格选中（页面会出现*）

       一般选择：babel,router,linter/formatter; 选好后 回车

       因为我们要安装hash模式的路由而不是历史模式的，所以输入n 回车

       然后选中标准模式的版本：Standard config回车

       然后默认选中第一项：Lint on save 回车

       然后默认选中第一项：In dedicated config files回车

       询问我们是否把当前做过的选择保存为一个模板，供后续再创建项目的时候，直接选择这个模板就可以了不用每次来选了。可以选择y、也可以选择n (此时选择n)

       安装好之后，提示我们：

       • cd vue_(Tab键补齐路径)， 回车
       • npm run serve 运行项目
       • 选择弹出的url地址，粘贴到浏览器使用，就可以看到创建的vue项目了

2. 基于 图形化界面 的方式，创建 新版vue 项目（掌握）

   • 在cmd窗口：vue ui 注意这两点，其他的设置同上

     1. 初始化git仓库（建议）：填写init project

     2. 选择四个：babel、router、Linter/Formatter、使用配置文件

     3. 基于2.x的旧模板，创建 旧版 vue 项目（了解）

         npm install -g @vue/cli-init  vue init webpack my-project
        

     4.

     5. 找到刚才创建的项目vue-project,在项目根目录运行：npm run serve 然后将url地址：http://localhost:8080/，粘贴到浏览器，查看结果，这样太麻烦了。希望在运行命令指令后，自动弹出浏览器页面方法：需要以下操作

     6. Vue 脚手架的自定义配置：

        1. 通过 package.json配置项目（不推荐使用这种配置方式）

           // 在最底部添加下面代码，必须是符合规范的json语法
             "vue": {
               "devServer": {
                 "port": "8888",
                 "open" : true
               }
             }
           
           

           运行：npm run serve

           注意：不推荐使用这种配置方式。

           因为 package.json主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架相关的配置，单独定义到 vue.config.js配置文件中。

        2. 推荐使用通过单独的配置文件配置项目（需要先删除上一个方法的配置信息）

           1. 在项目的跟目录创建文件 vue.config.js

           2. 在该文件中进行相关配置，从而覆盖默认配置: vue.config.js

               
                module.exports = {
                  devServer: {
                    open : true,
                    port: 8888
                    
                  }
                }
              

4. Element-UI 的基本使用

Element-UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。

官网地址为： http://element-cn.eleme.io/#/zh-CN

4.1 **基于命令行方式手动安装(**基于创建的项目：vue-project)

1. 安装依赖包npm i element-ui –S

2. 在main.js入口文件，导入 Element-UI 相关资源

   // 导入组件库
     import ElementUI from 'element-ui';
     // 导入组件相关样式
     import 'element-ui/lib/theme-chalk/index.css';
     // 配置 Vue 插件
     Vue.use(ElementUI);
   

3. 使用Element-UI

   复制Element-UI官方文档中的html代码，放在App.vue文件的template标签的根组件中
   运行：npm run serve
   

4.2 基于图形化界面自动安装和配置Element-UI

1. 在cmd窗口：运行vue ui命令，打开图形化界面

2. 通过 Vue 项目管理器，进入具体的项目配置面板

3. 点击 插件 -> 添加插件，进入插件查询面板

4. 搜索 vue-cli-plugin-element并安装

5. 配置插件，实现按需导入import on demand，从而减少打包后项目的体积

6. 任务–server–运行，提示：编译成功；则证明Element-UI安装成功

   使用Element-UI
   复制Element-UI官方文档中的html代码，放在App.vue文件的template标签的根组件中
   任务--server--运行，点击启动app