JAVA程序员学Vue系列之五 - webpack

笨笨笨
955 阅读5分钟

一. 认识webpack

官网 : www.webpackjs.com/

1.1 什么是打包

  • 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
  • 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
  • 将代码打包的同时进行混淆，提高代码的安全性。

1.2 webpack的认识

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用

二. 安装webpack

  • 安装webpack有两种方式，一种是本地安装，一种是全局安装，建议大家使用全局安装，后面都可以直接使用
  • 由于网络问题,安装时间会比较长，甚至可以会失败，你可以多试几次，这里建议大家可以切换淘宝镜像

2.1 本地安装

npm install webpack --save-dev
npm install webpack-cli --save-dev

2.2 全局安装(建议使用)

npm install -g webpack 
npm install -g webpack-cli

三. 打包功能测试

3.1 准备工作

3.1.1 b.js 用于导出数据

//准备工具对象一
const util01 ={
    sum(){
        return 10;
    }
}
//准备工具对象二
const util02 = {
    sum(){
        return 5;
    }
}

//把两个工具进行引出
export {util01,util02};

3.1.2. a.js 用于导入数据

//从b.js中导入两个工具
import {util01,util02} from "./b";
//使用工具中的方法得到结果
console.debug(util01.sum()+util02.sum());

3.1.3. webpack.html 进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/a.js"></script>
</head>
<body>
</body>
</html>

大家会发现，运行后会报错(如下图)，原因是因为很多浏览器是不支持导入导出语法的，因此，为了实现功能，我们必需使用webpack进行打包，才能完成功能。

3.2 webpack打包

3.2.1 打包命令

webpack ./js/a.js -o dist --output-filename bundle.js

  • 由于版本问题，有时候这个命令会发生小的改变
    • webpack ./js/a.js -o ./dist/bundle.js
    • webpack ./js/a.js --output-path dist --output-filename bundle.js

3.2.2 打包效果

3.1.3. 页面进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 直接导入咱们打包后的js文件 -->
    <script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>

四. 了解CommonJS导入导出

在上一节咱们使用的是ES6的导入导出语法，但是其实前端导入导出还有很多种方案。这里为大家再介绍一个CommonJS方案。大家暂时可作用了解知识即可。

4.1 d.js 用于导出数据

//定义一段内容(这里面加上一个匿名函数)
define(() => {
    let d ="源码小D";
    return d;
})

4.2 c.js用于导入数据

//引入c.js中的内容，拿到返回的结果
let d = require("./d");
alert(d);

4.3 输入命令

webpack ./js/c.js -o dist --output-filename bundle2.js

4.4 页面使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="dist/bundle2.js"></script>
</head>
<body>

</body>
</html>

五. webpack.config.js配置文件

刚才咱们确实可以进行功能打包，但是也有一个很不爽的点，就是每次打包要花很多时间输入命令，还不好记忆。所以我们一般不会像刚才那个打包。而是都会使用配置文件webpack.config.js来完成。

5.1 webpack.config.js代码解析

  • 新建 webpack.config.js 文件,该文件必需处于根目录
//引入相应的路径模块
const path = require('path');

module.exports = {
    //打包的入口
    entry: './js/a.js',
    output: {
        //文件的路径设置
        path: path.resolve(__dirname, 'dist'),
        //文件名称设置
        filename: 'bundle.js'
    }
};

5.2 直接运行看效果

  • 运行命令：直接在命令行中输入webpack即可

六. 引入CSS文件

之前咱们做的都是引入相应的js文件，但是在开发的时候有时候还会出现其它的文件，比如说描述样式的css文件，而webpack也支持咱们进行CSS的引入。

6.1 准备一个index.css文件

.mydiv{
    color: red;
    background: aquamarine;
    font-size: 50px;
}

6.2 在a.js中引入index.css文件

//从b.js中导入两个工具
import {util01,util02} from "./b";
//引入相应的css(这里需要注意你的路径是否正确)
require("../css/index.css");

注意点：这里如果直接运行webpack是会报错的(错误图如下图)，原因是由于CSS打包的话是需要引入CSS的加载器，否则默认无法打包样式文件。

6.3 引入样式模板

如果要打包css,需要引入两个模板：官网文档引入样式模板地址

  • style-loader : 使用css的加载器
  • css-loader : 编译css的加载器

6.3.1 输入命令安装

npm install style-loader --save-dev    //安装使用的css的加载器
npm install --save-dev css-loader      //安装编译的css的加载器

6.3.2 修改webpack.config.js

//引入相应的路径模块
const path = require('path');

module.exports = {
    //打包的入口
    entry: './js/a.js',
    output: {
        //文件的路径设置
        path: path.resolve(__dirname, 'dist'),
        //文件名称设置
        filename: 'bundle.js'
    },
    //加入模块
    module: {
        //匹配的文件规则
        rules: [
            {
                test: /\.css$/, //匹配所有的css文件
                use: [ 'style-loader', 'css-loader' ] //需要使用到的加载器
            }
        ]
    }
};

成功后直接在命令行直接输入webpack打包，然后引入a.js就可以使用写好的css样式了

6.3.3 版本问题解决

  • 运行如果出现以下问题，很有可能是版本出现问题，我们只需要进行版本的修改即可
  • 修改命令如下:
  npm install style-loader --save-dev@3.6.0
  npm install --save-dev css-loader@3.6.0

七. 热更新web服务器

以后咱们开发前后端分离，相当于前端会单独在一个服务器中运行，webpack中为咱们准备了一个开发服务，可以完成这个功能，非常的牛皮(你先认为就是一个和tomcat差不多的东西)

7.1 直接开发服务插件

npm install webpack-dev-server --save-dev

7.2 添加启动脚本

  1. 在package.json中配置script
    • --inline：自动刷新
    • --hot：热加载
    • --port：指定端口
    • --open：自动在默认浏览器打开
    • --host：可以指定服务器的 ip，不指定则为127.0.0.1
{
 ...
  "scripts": {
    ...
    "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
  },
 ...
}

  1. 输入命令 npm run dev 运行第1步的脚本

    这时候会报错说找不到对应的模块(报错信息看下图)

  2. 在package.json中配置修改webpack的版本

{
 ...
  "devDependencies": {
    ...
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
 ...
}
  1. 重新执行命令
  • 重新安装npm
npm install
  • 输入命令运行脚本
npm run dev
avatar
文章
阅读
粉丝