个人博客
0%

【Vue】Webpack

发表于 分类于

关于前端模块化工具webpack的使用

一、CommonJS模块化语法

1.1 导出

1
2
3
4
5
6
7
8
9
module.exports = {
  flag: true,
  test(a, b){
    return a + b;
  },
  demo(a, b){
    return a * b;
  }
}

1.2 导入

1
let {flag, test, demo} = require('js文件路径')

二、ES6模块化语法

2.1 导出

  • （1）统一导出
1
2
3
4
5
6
7
8
9
10
11
var flag = true

function sum(a, b){
  return a + b;
}

//导出方式一
export {
  flag,
  sum
}
  • （2）定义变量的同时进行导出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//在变量前添加export修饰符
export var money = 1000 

export function add() {
  console.log("调用导出方法成功")
}

export class Person{
  name = "莱特雷"
  age = 20
  eat(){
    console.log("吃饭")
  }
}
  • （3）默认导出
    • 默认导出只能导出一个变量，默认导出用于导出的变量被引用时可以重命名，变量名不固定
1
2
const city = "广州"
export default city //export default 导出只能有一个

2.2 导入

  • （1）统一导入
1
import * as A from "./a.js"; //'A'为别名，引用数据格式为A.xxxx
  • （2）选择导入
1
import {flag, sum} from "./a.js"; //在'{}'中选择要导入的数据，使用数据直接用变量名即可
  • （3）默认导出的数据导入
1
import c from "./a.js"; //'c'为默认变量的新的变量名，直接调用新变量名使用数据

三、webpack介绍和安装

webpack是一个现代的JavaScript应用的静态模块打包工具
webpack官网：https://www.webpackjs.com/

3.1 webpack安装

  • webpack要正常使用，需要node环境
  • node环境为了可以正常使用多种代码，需要各种包
  • 安装node时一般会自动安装npm工具，会管理各种包之间的依赖
  • （1）node.js安装
    • 官网：https://nodejs.org/zh-cn/
    • 下载长期支持版，处理安装路径，一路默认安装即可
    • 安装后，打开命令行’node -v’查看，有版本号显示，即安装成功
  • （2）webpack安装
    • webpack安装利用node.js的npm来进行安装
    • 建议安装webpack3.6.0，使用的时vue cli2版本，可以看见各种各样的webpack配置。高版本使用vue cli3版本，隐藏了webpack的配置
    • 安装：打开命令行敲’npm install webpack@3.6.0 -g’进行安装
    • 检查安装：命令行敲’webpack -version’查看，有版本号显示，安装成功

四、webpack的基本使用

4.1 模块化的目录结构

项目
|—-src （存放各种静态资源文件）
|—-dist (用来存放打包好的文件)

4.2 webpack打包

  • 对于js文件，一般会使用main.js作为js的主程序
  • 所以打包方式为：在命令行敲’webpack ./src/main.js ./dist/bundle.js’
  • 解释：将main.js文件包括其依赖，打包为bundle.js

五、webpack基础配置

5.1 简易打包命令

实现命令行敲’webpack’，直接打包，不用敲后面参数

  • （1）在项目根目录创建一个webpack.config.js文件
  • （2）配置文件设置
1
2
3
4
5
6
7
8
9
10
const path = require('path') //node语法，是node核心模块，存放项目绝对路径的一个对象

module.exports = {
  entry: './src/main.js', //入口

  output: { //出口
    path: path.resolve(__dirname, 'dist'), //需要绝对路径，利用node获取当前目路的绝对路径__dirname，后面添加的参数为路径的拼接
    filename: 'bundle.js'
  } 
}

5.2 使用局部webpack

  • （1）在项目敲’npm init’来创建一个package.json文件，除了文件名非中文外，其余默认即可
  • （2）安装局部webpack，在项目的命令行下’npm install webpack@3.6.0‘，因为webpack是开发时才使用的，发布时不使用，可以执行’npm install webpack@3.6.0 –save-dev’
  • （3）因为命令行使用webpack命令默认使用全局webpack的，但是可以利用npm的脚本，默认会先从本地寻找命令，在package.json中设置
1
2
3
4
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack" 添加脚本命令映射，执行'npm run build' == 'webpack'
}

六、webpack使用css文件

webpack本身只支持js代码的打包，不支持css。需要向webpack拓展对相应的loader即可

官方文档：https://www.webpackjs.com/loaders/css-loader/

6.1 环境创建

  • （1）随便创建一个css文件，写一个简单的css语法
1
2
3
body{
    background-color: red;
}
  • （2）main.js引入css文件
1
2
//依赖css文件
require('./css/normal.css');

6.2 安装配置相应的loader

查看官方文档，发现要打包css要使用到两个loader，css-loader和style-loader

  • （1）loader安装
  • 跟官方文档一样，只是由于我们使用的webpack版本较低，新版本的css-loader会不支持，建议使用2.0.2版本
1
2
npm install --save-dev css-loader@2.0.2
npm install --save-dev style-loader
  • （2）loader配置
  • 跟官方文档一样，在webpack.config.js中配置即可
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, //正则表达式，对.css结尾的文件进行处理
        //css-loader负责将css文件进行加载
        //style-loader负责将样式添加到DOM中
        //webpack使用多个loader时，是从右到左进行读取，所以顺序不能反
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
  • 执行npm run build 执行打包，并在页面引入生成bundle.js

七、打包图片文件

7.1 环境搭建

  • 在之前的案例进行修改，将css文件背景颜色改成背景图片
    1
    2
    3
    4
    body{
        /*background-color: black;*/
        background: url("../img/link.jpg");
    }

7.2 url-loader安装和配置

1
npm install --save-dev url-loader@1.1.2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module: {
    rules: [
        //配置图片文件
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 40000,  //限制图片大小，若图片小于限制，则会用base64编码来显示图片
                            //大于限制，需要使用file-loader，会生成一个hash编码图片到dist文件中，不需要配置
            }
          }
        ]
      }
    ]
  }
  • 先让图片的大小 < 限制的大小

7.3 file-loader安装

1
npm install --save-dev file-loader@3.0.1
  • 安装完后无需任何的配置
  • 打包发现图片会复制一份到dist目录，而网页无法正确访问到该图片
  • 解决方法：
    • （1）将网页放在dist路径下
    • （2）修改webpack.config.js配置文件
1
2
3
4
5
module.exports = {
  output: {
    publicPath: './dist/' //图片资源文件寻找的路径
  } 
}

7.4 url-loader高阶设置

1
2
3
4
5
6
7
8
9
10
11
12
{
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 40000,                
        name: 'img/[name].[hash:8].[ext]' //按照此命名规范，对大于限制的文件进行生成，生成一个img目录，'名字.8位hash值.拓展名'的格式
      }
    }
  ]
}

八、ES6转ES5

8.1 安装和配置

  • 由于只是简单的配置，就不完全按照官方文档来操作
  • 安装
1
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  • 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module: {
  rules: [
    //ES6转ES5
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/, //排除掉这些目录下的js文件
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

九、webpack使用Vue

  • （1）通过npm安装Vue
1
npm install vue --save
  • （2）JS代码引用Vue
1
2
3
4
5
6
7
8
9
//引入Vue
import Vue from 'vue'; //Vue默认到导出为export default，所有引入时可以起别名

const app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
});
  • （3）页面创建对应的模板
1
2
3
<div id="app">
  {{message}}
</div>
  • （4）报错解决
    • 编译完后运行，会出现报错，只使用了runtime-only
    • runtime-only：代码中，不可以有任何的template
    • runtime-compiler：代码中，可以有template，因为compiler可以用于编译template
1
2
3
4
5
6
7
8
修改webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' //指定vue的路径，按照该路径寻找vue，vue.esm.js包括了runtime-compiler
    }
  }
}

十、Vue使用最佳方案

10.1 template和el

在前端的开发中，我们并不希望过多的修改index.html页面，所以需要把页面代码抽取出来

1
2
3
4
5
6
7
8
<body>
  <!--
  在同时使用'el'和'template'时，'template'会替换掉'el'
  -->
  <div id="app">
  </div>
  <script src="dist/bundle.js"></script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//引入Vue
import Vue from 'vue'; 

const app = new Vue({
  el: "#app",
  template:` //将前端代码提取到template属性中
    <div>
      {{message}}
    </div>
  `,
  data: {
    message: "Hello Vue!"
  }
});
  • template会替换el的代码

10.2 抽取组件进行优化

可以将template单独抽取为组件来使用，变得简洁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//引入Vue
import Vue from 'vue';

//抽取成为组件
const App = {
  template: `
    <div>
      {{message}}
    </div>
  `,
  data() {
    return {
      message: "Hello Vue!"
    }
  }
}

new Vue({
  el: "#app",
  template: '<App></App>',
  //局部注册组件
  components: {
    App //ES6语法：App: App
  }
});

10.3 组件抽取再一步优化

  • （1）创建一个vue文件夹，里面创建app.js，存放组件
1
2
3
4
5
6
7
8
9
10
11
12
export default {
  template: `
    <div>
      {{message}}
    </div>
  `,
  data() {
    return {
      message: "Hello Vue!"
    }
  }
}
  • （2）main.js导入组件并使用
1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'; 
//导入组件
import App from "./vue/app.js"

new Vue({
  el: "#app",
  template: '<App></App>',
  components: {
    App //ES6语法：App: App
  }
});

10.4 使用vue文件（最终方法）

  • （1）IDEA支持vue文件
  • （2）创建Vue文件，并将组件内容移动到里面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--模板-->
<template>
  <div class="title">
    {{message}}
  </div>
</template>

<!--脚本-->
<script>
  export default {
    name: "App",
    data() {
      return {
        message: "Hello Vue!"
      }
    }
  }
</script>

<!--样式-->
<style scoped>
  .title {
    color: yellow;
  }
</style>
  • （3）main.js引入vue文件
1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'; //Vue默认到导出为export default，所有引入时可以起别名

import App from "./vue/App.vue" //引入vue文件

new Vue({
  el: "#app",
  template: '<App></App>',
  components: {
    App //ES6语法：App: App
  }
});
  • （4）安装和配置vue-loader
1
2
//安装
npm install --save-dev vue-loader vue-template-compiler
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//webpack.config.js配置
//14以上的版本，需要引入一个插件才能使用
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      //配置vue-loader
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  
  plugins: [
    // 引入插件
    new VueLoaderPlugin()
  ]

10.5 小知识

  • 可以通过设置，引入文件是可以省略后缀名
1
2
3
4
5
6
//webpack.config.js配置
module.exports = {
  resolve: {
    extensions: ['.js', '.css', '.vue'] //省略后缀名
  }
}

十一、Vue插件使用

11.1 横幅插件

  • 横幅插件使用打包时声明一些信息，例如版权等等
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //webpack.config.js
    const webpack = require('webpack')

    module.export = {
      ...
      plugins: [
        new webpack.BannerPlugin('最终版权归letere所有！')    
      ]
    }

11.2 打包html插件

  • 将文件中的index.html打包到dist目录下

  • （1）安装和配置

    1
    2
    //插件安装 webpack@3.6.0
    npm install html-webpack-plugin@3.2.0 --save-dev
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //配置
    //webpack.config.js
    const htmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
      ...
      plugins: [
        new htmlWebpackPlugin({
          template: 'index.html' //打包页面的位置
        })
      ]
    }

  • （2）index.html修改

1
2
3
4
5
6
7
<body>
  <div id="app">
  </div>
</body>
<!--js导入会在打包时自动生成，不用我们添加
  记得把之间在webpack.config.js文件中设置静态资源位置注释掉
-->

11.3 js压缩（丑化）

  • js压缩，会将多余的空格删掉，并将很长的变量名以一个简单的字符来替换，进而减小代码的大小
  • 高版本的webpack自带压缩
1
2
//安装
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
1
2
3
4
5
6
7
8
9
//webpack.config.js配置
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
}

十二、搭建本地服务器

  • 为了方便调试，在开发阶段可以自己搭建一个本地服务器，自动编译，不用每次都打包，自己点击网页运行
1
2
//安装
npm install --save-dev webpack-dev-server@2.9.1
1
2
3
4
5
6
7
8
//webpack.config.js配置
module.exports = {
  //配置本地服务器
  devServer: {
    contentBase: "./dist", //服务的文件夹
    inline: true //是否实时监听
  }
}
  • 因为我们是使用局部环境，所以直接敲”webpack-dev-server”无法启动服务器，要配置一下脚本
1
2
3
4
5
6
//package.json配置
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  }