webpack的基本使用

1、webpack能够处理JS文件之间相互依赖的关系

2、webpack能够处理JS的兼容性问题，将高级的、浏览器无法识别的语法转为低级的浏览器能识别的语法

安装

全局安装webpack

1
npm install -g webpack
1
npm install webpack@3.0.0 -g  //安装指定版本

全局安装脚手架()

1
npm i webpack-cli -g

初体验

这里以隔行换色为例：

先构建文件目录如下：

目录

其中node_modules文件夹是安装其他包自动构建的

安装我们要用到的包，这里使用了jquery

1
npm i jquery

index.html中写入代码

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
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 不推荐在这里直接引用任何css script -->
    <!-- 所有的引用都在main.js中写 -->

    <!-- 因为main.js中用了ES6的语法，浏览器不兼容，此时就需要webpack来预处理 -->
    <!-- <script src="./main.js"></script> -->
</head>
<body>
    <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>
        <li>这是第10个li</li>
    </ul>
</body>
</html>

在main中写入代码

1
2
3
4
5
6
7
8
9
//这是入口js文件

//导入jquery
import $ from 'jquery'

$(function(){
    $('li:odd').css('backgroundColor','skyblue');
    $('li:even').css('backgroundColor','pink')
})

用webpack处理mian.js

命令行中键入

1
webpack ./src/main.js ./dist/bundle.js

./src/main.js是要处理的文件路径

./dist/bundle.js是处理之后需要保存到的路径

此时将main.js处理成bundle.js,此时我们就可以在html页面中直接引入bundle.js了

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

完成效果

1561981889615

基本配置文件的使用

每当我们将mian.js中的内容做出变化时，都要手动输入 webpack ./src/main.js ./dist/bundle.js命令来重新生成bundle.js,过于麻烦，这里可以设置配置文件以达到，只需要输入webpack就可以达到重新生成bundle.js的目的

在项目根目录下创建webpack.config.js文件，进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path');

//这个配置文件，其实就是一个js文件，通过Node中的模块操作，向外暴露了一个对象
module.exports = {
    //手动指定入口 和 出口

    //入口，表示要使用webpack打包哪个文件
    entry: path.join(__dirname,'./src/main.js'),
    //输入文件相关属性
    output: {
        path: path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //指定 输出文件名称
    }
}

使用webpack-dev-server

之前代码每做一次改变都要在命令行键入webpack，过于麻烦，为了进一步偷懒，我们可以利用webpack-dev-server工具来实现。

安装

命令行键入

1
npm i webpack-dev-server -D  //将此工具安装到项目的本地开发依赖
1
npm i webpack -D   //项目中安装webpack
1
npm i webpack-cli -D   //项目中安装webpack-cli

使用

webpack-dev-server的使用方式同webpack一样，（这让我想到了node 与 nodemon`的关系）

1
webpack-dev-server   //暂不可用

注意：1、由于我们是在项目本地中安装的，无法在powershell中直接使用，我们可以在package.json中，在scripts中添加"dev": "webpack-dev-server"，配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "name": "01-webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "jquery": "^3.4.1"
    },
    "devDependencies": {
        "webpack-dev-server": "^3.7.2"
    }
}

2、由于webpack-dev-server是依赖于webpack的，所以我们呢必须要在项目中本地安装webpack和脚手架

3、由于webpack-dev-server打包的文件并没有存放在磁盘上，而是暂存在内存中，导致我们的改变main.js时没有效果，它相当于在项目根目录生成了一个看不见的文件，

所以我们在script引入时，应直接应用根目录下

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

启动服务

1
npm run dev

使用html-webpack-plugin

使得html页面也可以被加载到内存中，提高代码开发效率

安装

1
npm i html-webpack-plugin -D

使用

在main.js中引入

1
const htmlWebpackPlugin = require('html-webpack-plugin');

在plugins中配置

1
2
3
4
5
6
7
8
9
10
plugins: [
    //配置插件的节点
    new webpack.HashedModuleIdsPlugin(), //new 一个热更新的 模块对象 
    new htmlWebpackPlugin({  //创建一个 在内存中生成HTML 页面的插件
        //指定 模板页面，将来会根据指定的页面的路径，去生成内存中的 页面
        template: path.join(__dirname,'./src/index.html'),
        // 指定 生成的页面的名称
        filename: 'index.html'
    })
]

webpack 处理第三方不是文件类型的过程

  1. 当发现要处理的文件不是js文件时，回去配置文件中查找有无对应的第三方loader规则；
  2. 如查找到对应规则，会调用对应的一系列loader处理此文件类型；
  3. 调用use中一系列的loader时，会从后向前调用，第一个loader的处理结果会返回给下一个；loader，直到当前loader为最后一个loader；
  4. 当最后一个loader处理完毕时，会将执行结构返回给webpack进行打包合并处理，并输出到bundle.js中去。

loader

由于webpack默认只能处理js文件，非js文件要使用loader加载器

loader处理css

在index.html中不推荐直接引入css，这样可能会导致客户端项服务器发送第二次请求，这里使用第三方loader，利用webpack将css打包到bundle.js中去。

处理css需要两个loader加载器

  • style-loader
  • css-loader

安装

1
npm install style-loader css-loader -D

配置

在webpack.config.js中新增一个配置节点module，他是一个对象；在这个module对象上有一个rules属性，这个属性是一个数组，存放了所有第三方的 匹配 和 处理规则。

1
2
3
4
5
module: {
    rules: [
        {test: /\.css$/, use: ['style-loader','css-loader']}
    ]
}

使用

在main.js中引入css

1
import './css/index.css'

loader处理less

处理less需要三个个loader加载器

  • style-loader
  • css-loader
  • less-loader

安装

1
npm install style-loader css-loader less-loader -D

注意：若之前已经安装了style-loader css-loader，仅需要安装less-loader 即可

1
npm install less-loader -D

若要正常使用less-loader，还需要一个less依赖项，安装less

1
npm install less -D

注意：此处的less是内部依赖于less-loader的，则无需再main.js中引入

配置

在module中的rules中添加配置

1
{test: /\.less$/, use: ['style-loader','css-loader','less-loader']}

使用

main.js中引入index.less

1
import './css/index.less'

loader处理scss

处理less需要三个个loader加载器

  • style-loader
  • css-loader
  • sass-loader (坑：这里是sass 而文件名是.scss)

安装

1
npm install sass-loader -D

安装内部依赖项

1
npm install node-sass -D

注意此处安装node-sass若失败，请切换cnpm进行安装

1
npm install cnpm -g
1
cnpm install node-sass -D

配置

1
{test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}

使用

main.js中引入index.scss

1
import './css/index.scss'

loader处理css中的图片

当css中出现引用图片时，webpack会解码出错，如

1
2
3
body {
	background: url(./images/temp.jpg);
}

之所以出错，是由于对url的解析出错，这里需要用到url-loader；

处理图片需要两个loader加载器

  • url-loader
  • file-loader

安装

1
npm install url-loader file-loader -D

配置

1
{test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader?limit=1024$name=[hash:8]-[name].[ext]'}

该loader会默认将要加载的图片转码为base64的字符串替换url原本的位置，使其可以直接加载在页面上；

其中：

  • limit 当图片大小超过此属性对应的值时，不将其转码为base64，否则转为base64
  • name 设置由url-loader处理之后的文件名
    • [hash: 8] 设置文件名开头为随机的8位哈希值
    • [name] 设置文件名结束为文件的原本名字
    • [ext] 设置后缀名为文件原本的后缀名

示例：当文件test.png大小大于limit时，文件被处理为3hu4ye89-test.png

使用

在css中使用

1
2
3
body {
  background: url(../images/test.png);
}

并将此css文件引入main.js中

loader处理字体图标的问题

当我们使用第三方字体图标时（如bootstrap.css）时，若文件声明某种字体时而利用url去引用其他文件时，在webpack打包时便会报错。

处理图片需要一个loader加载器

  • url-loader

安装

1
npm install url-loader -D

其实上一步已经安装，无需再次安装。

配置

1
{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}

使用

这里以bootstrap为例：

安装bootstrap

1
npm install bootstrap@3.3.5 --save

index.html中输入

1
<span class="glyphicon glyphicon-heart"></span>

main.js中引入

1
import 'bootstrap/dist/css/bootstrap.css'

注意：这里不能直接引入import 'bootstrap'

babel的使用

由于webpack只能处理部分ES6的代码，所以为了更好的兼容ES6我们需要引入babel来达到目的。将ES6以上的语法自动转换成当前浏览器可以识别的ES最高版本的语法。

安装

安装babel的转码工具

1
npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime --save-dev

安装babel转换的语法

1
npm i babel-preset-env babel-preset-stage-0 --save-dev

配置

​ 1、在webpack.config.js中配置

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

​ 2、在项目根目录下新建一个名为 .babelrc的babel配置文件,文件中键入内容

1
2
3
4
{
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
}

注意：该文件是严格遵从json格式的。

其中:

  • presets 中配置语法插件 (相当于高级语法翻译成低级语法的字典)
  • plugins中配置属于babel的插件（相当于翻译器）

最后更新： 2019年09月02日 11:01

原始链接： https://HowlCN.github.io/2018/04/02/webpack的基本使用/

赏
× 请我吃糖~
打赏二维码