webpack简单入门

忘是亡心i 2021-09-02 03:41 573阅读 0赞

webpack

1、关于webpack

  1. 什么是webpack？

    webpack可以看做是将模块自动打包的工具，它会自动分析项目结构，然后将一些浏览器不能直接运行的扩展语言（TypeScript等）打包为合适的结构以便用户的浏览器能够进行解析。

    在这里插入图片描述

  2. 为什么要用webpack？

    因为在Vue中可能会用到大量的文件以及文件依赖以及项目结构，所以就推荐使用webpack来辅助打包。

  3. 怎么使用webpack

    因为webpack的运行环境依赖node.js，所以需要先自行安装node.js。装好node.js之后再使用npm安装webpack

  4. 安装webpack

    安装node.js完成后在windows命令行使用

    1. node -v  #查看node.js的环境变量是否生效

    如果node环境安装成功，再使用

    1. npm install webpack@3.6.0 -g

    进行全局安装webpack的3.6.0版本。

2、利用webpack进行一次模块化打包

webpack可以将之前使用AMD、CommonJS、ES6规范的模块化打包方式简化，只需要将模块代码写好后利用webpack进行打包就可以了。

  1. 新建项目（项目目录结构如下）

    1. │  index.html
    2. │
    3. ├─dist
    4. │      bundle.js
    5. │
    6. └─src
    7.         info.js
    8.         main.js

    src存放开发时的源代码，dist存放经过webpack打包后的代码

  2. 新建两个js文件，其中一个导出，另外一个导入

    info.js：

    1. //定义变量
    2. let name='测试';
    3. let age=18;
    4. let message='Hello!Webpack!';
    6. //导出变量（暴露）
    7. export { 
    8.   name,age,message
    9. }

    main.js：

    1. //从info文件中导入
    2. import * as info from "./info";
    4. console.log(info.name);
    5. console.log(info.age);
    6. console.log(info.message);

  3. 在命令行执行

    1. webpack ./src/main.js ./dist/bundle.js
    2. #将main.js打包成为bundle.js

    这个时候webpack就会自动寻找模块之间的依赖关系（前提是代码没有错误），然后将所有的模块打包为一个bundle.js

  4. 在html里用script标签引用bundle.js

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6. </head>
    7. <body>
    8. <script src="./dist/bundle.js"></script>
    9. </body>
    10. </html>

利用webpack打包的好处就是你只需要专注完成模块内的代码，然后最后使用webpack进行打包，然后直接在html里引用一个js文件就可以了（因为webpack会把所有模块打包成一个js）。

3、webpack的配置

因为很多时候我们的项目最好是在项目里面就配置好对应的依赖，webpack也算是项目里的依赖，就所谓的局部依赖，所以我们就需要给当前项目也要配置webpack。

  1. 引入node

    因为在webpack里并不能获取当前项目的绝对路径，但是在webpack中又需要使用到它，但是node里面又有一个模块（函数）可以获得绝对路径，所以先引入node

    1. npm init -y

    npm init就是初始化node，-y参数就是全部选择默认（注意项目名不能有中文），接下来就会在项目的根目录里生成一个package.json文件，就是该项目的描述文件，里面的东西都可以自定义

    1. { 
    2.   "name": "webpackStart",     #项目名称
    3.   "version": "1.0.0",        #项目版本号
    4.   "description": "",        #项目描述
    5.   "main": "index.js",        #项目入口
    6.   "scripts": {                   #脚本命令
    7.     "test": "echo \"Error: no test specified\" && exit 1"
    8.   },
    9.   "keywords": [],
    10.   "author": "",                #作者
    11.   "license": "ISC"            #开源协议
    12. }

  2. 编写webpack配置文件

    在项目根目录里新建一个名为webpack.config.js文件，该文件就是webpack的配置文件，编辑如下配置：

    1. //从node的系统模块中获得path
    2. const path=require('path');
    4. //指定webpack打包的起点（来源）和终点（目的地）
    5. module.exports={ 
    6.   //起点字符串路径
    7.   entry:'./src/main.js',
    8.   //终点对象
    9.   output:{ 
    10.     //路径（拼接字符串）
    11.     path:path.resolve(__dirname,'dist'),
    12.     //生成的文件名
    13.     filename:'bundle.js',
    14.   },
    15. };

    第一步require(‘path’)就是从node的系统模块中获取path，和在Java中导包类似，然后再用CommonJS的方式导出，再在里面编辑起点和终点，起点直接输入相对路径的字符串，但是终点的参数就必须是个对象，然后path就是利用从node中获取的模块然后将__dirname和dist拼接起来。

  3. 在命名行运行webpack

    然后在命令行输入

    1. webpack

    就可以看到打包成功了。

4、将webpack集成到项目中

因为大多数开发的时候每个开发人员自己本地环境中都会有一个webpack，所以最好是在项目中就直接指定webpack的版本，这样就不会每次项目从远端拉取到本地的时候使用本地的webpack打包，而是使用项目中自带的webpack打包，因为前端的依赖项中版本之间差距特别大。

  1. 将webpack安装到项目中

    利用npm将webpack安装到项目中

    1. npm install webpack@3.6.0 --save-dev

    –save-dev的意思是保存到项目中并且将它设置为开发时依赖，此时项目中就会多一个node_modules文件夹，里面就会有咱们刚刚下载好的webpack，此时也会看到package.json文件中多了：

    1. "devDependencies": { 
    2.     "webpack": "^3.6.0"
    3.   }

    这就是刚刚我们下载并且指定为开发环境使用的webpack

  2. 在项目的描述文件（package.json）中配置

    在项目中下载好了webpack后在package.json的scripts里配置脚本：

    1. "scripts": { 
    2.     "test": "echo \"Error: no test specified\" && exit 1",
    3.     "build": "webpack"
    4.   },

    这样就可以直接在项目的命令行里输入npm run build就直接映射到webpack，并且使用项目里面的webpack进行打包了。相当于此时的webpack命令就被映射到了build命令上。

5、利用webpack打包css文件

因为webpack本身是直接可以将js文件打包的，可是开发的时候我们需要打包除了js的文件怎么办呢？这个时候就需要用到各种各样的loader，比如css-loader（打包css文件）、style-loader（将css样式添加到DOM）

  1. 把项目目录改为用包装css或者js文件

    1. │  index.html
    2. │  package-lock.json
    3. │  package.json
    4. │  webpack.config.js
    5. │
    6. ├─dist
    7. │      bundle.js
    8. │
    9. └─src
    10.     │  main.js
    11.     │
    12.     ├─css
    13.     │      index.css
    14.     │
    15.     └─js
    16.             info.js

    可以看到css和js文件都被放到了对应的包里，而main.js（入口则是放在了外面）

  2. 写css文件

    index.css：

    1. body{ 
    2.   background-color: red;
    3. }

  3. 在js中引入css

    main.js：

    1. //从info文件中导入
    2. import * as info from "./js/info";
    4. console.log(info.name);
    5. console.log(info.age);
    6. console.log(info.message);
    8. //引入css文件
    9. require('./css/index.css');

  4. 利用npm安装loader

    因为webpack是自带将js文件打包的能力的，但是并不具备将其他文件打包的能力，所以我们需要自行安装，假如说如果只安装了css-loader，那么webpack确实具备了解析css文件的能力，但是还需要安装style-loader来将css加载到DOM上。所以：

    1. npm install --save-dev css-loader@2.0.2
    2. npm install --save-dev style-loader@0.23.1

    分别都以dev开发环境下安装css-loader和style-loader

  5. 在webpack.config里配置刚刚安装loader

    webpack.config.js：

    1. //从node的系统模块中获得path
    2. const path=require('path');
    4. //指定webpack打包的起点（来源）和终点（目的地）
    5. module.exports={ 
    6.   //起点字符串路径
    7.   entry:'./src/main.js',
    8.   //终点对象
    9.   output:{ 
    10.     //路径（拼接字符串）
    11.     path:path.resolve(__dirname,'dist'),
    12.     //生成的文件名
    13.     filename:'bundle.js',
    14.   },
    15.   module: { 
    16.     rules: [
    17.       { 
    18.         //正则表达式匹配所有以.css结尾的文件
    19.         test: /\.css$/,
    20.         //style-loader是将css样式作用到DOM上
    21.         //css-loader是将css文件处理
    22.         //加载的顺序是从右往左加载
    23.         use: [ 'style-loader', 'css-loader' ]
    24.       }
    25.     ]
    26.   }
    27. };

    将module导出，并且在module里加载两个loader，注意加载的顺序是从右往左，所以先加载css-loader再加载style-loader

  6. 利用webpack将整个项目进行打包

    最后依旧是利用webpack将整个项目打包：

    1. npm run build

6、利用webpack打包less文件

有的时候可能需要利用webpack将less文件打包称css文件，这个时候就需要用到less-loader和less工具

  1. 写less文件

    1. @fontSize:50px;
    2. @fontColor:white;
    3. body{
    4.   font-size: @fontSize;
    5.   color: @fontColor;
    6. }

  2. 在js里面引入less

    1. //从info文件中导入
    2. import * as info from "./js/info";
    4. console.log(info.name);
    5. console.log(info.age);
    6. console.log(info.message);
    8. //引入css文件
    9. require('./css/index.css');
    11. //引入less文件
    12. require('./css/font.less')

  3. 利用npm安装loader和less工具

    1. npm install --save-dev less-loader@4.1.0
    2. npm install --save-dev less@3.9.0

  4. 在webpack.config.js里配置刚刚下载好的loader

    1. //从node的系统模块中获得path
    2. const path=require('path');
    4. //指定webpack打包的起点（来源）和终点（目的地）
    5. module.exports={ 
    6.   //起点字符串路径
    7.   entry:'./src/main.js',
    8.   //终点对象
    9.   output:{ 
    10.     //路径（拼接字符串）
    11.     path:path.resolve(__dirname,'dist'),
    12.     //生成的文件名
    13.     filename:'bundle.js',
    14.   },
    15.   module: { 
    16.     rules: [
    17.       { 
    18.         //正则表达式匹配所有以.css结尾的文件
    19.         test: /\.css$/,
    20.         //style-loader是将css样式作用到DOM上
    21.         //css-loader是将css文件处理
    22.         //加载的顺序是从右往左加载
    23.         use: [ 'style-loader', 'css-loader' ]
    24.       },
    25.       { 
    26.         //正则表达式匹配所有以.less结尾的文件
    27.         test: /\.less$/,
    28.         //加载的顺序是从右往左加载
    29.         //less-loader将less文件编译成css
    30.         //css-loader将css文件转换为浏览器可读的文件
    31.         //style-loader将样式添加到DOM上
    32.         use: [ 'style-loader', 'css-loader','less-loader' ]
    33.       }
    34.     ]
    35.   }
    36. };

  5. 利用webpack将整体项目打包

    同样是利用

    1. npm run build

    将整个项目用webpack进行重新打包

7、利用webpack的url-loader打包图片资源

同样假如需要利用webpack打包图片资源的时候会分两种情况，在配置loader的时候会限定图片的大小limit，假如图片的大小小于limit那么图片在打包的时候就会被base64编码转换为字符串然后进行显示（通常用于小图片），如果图片超过limit的时候打包的时候就会直接将图片以文件的格式直接存到项目里，这个时候会利用file-loader（通常用于大图片）。保险起见，最好两种方式都使用，小图片利用url-loader打包，大图片利用file-loader打包。

  1. 在项目根目录新建img（自定义名）文件夹用于存放图片

  2. 在需要图片的地方引入图片

    1. body{ 
    2.   /*background-color: red;*/
    3.   background: url("../img/baidu.jpg");
    4. }

  3. 利用npm安装url-loader

    1. npm install url-loader@1.1.2 --save-dev

    依旧是在开发环境安装url-loader的1.1.2版本

  4. 在webpack.config.js里配置webpack

    1. //从node的系统模块中获得path
    2. const path=require('path');
    4. //指定webpack打包的起点（来源）和终点（目的地）
    5. module.exports={ 
    6.   //起点字符串路径
    7.   entry:'./src/main.js',
    8.   //终点对象
    9.   output:{ 
    10.     //路径（拼接字符串）
    11.     path:path.resolve(__dirname,'dist'),
    12.     //生成的文件名
    13.     filename:'bundle.js',
    14.   },
    15.   module: { 
    16.     rules: [
    17.       // css-loader
    18.       { 
    19.         //正则表达式匹配所有以.css结尾的文件
    20.         test: /\.css$/,
    21.         //style-loader是将css样式作用到DOM上
    22.         //css-loader是将css文件处理
    23.         //加载的顺序是从右往左加载
    24.         use: [ 'style-loader', 'css-loader' ]
    25.       },
    26.       // less-loader
    27.       { 
    28.         //正则表达式匹配所有以.less结尾的文件
    29.         test: /\.less$/,
    30.         //加载的顺序是从右往左加载
    31.         //less-loader将less文件编译成css
    32.         //css-loader将css文件转换为浏览器可读的文件
    33.         //style-loader将样式添加到DOM上
    34.         /*use: [ 'style-loader', 'css-loader','less-loader' ]*/
    35.         use:[
    36.           { 
    37.             loader:'style-loader'
    38.           },
    39.           { 
    40.             loader:'css-loader'
    41.           },
    42.           { 
    43.             loader:'less-loader'
    44.           },
    45.         ]
    46.       },
    47.       // url-loader
    48.       { 
    49.         // 匹配png/jpg/gif/jpeg等图片资源
    50.         test: /\.(png|jpg|gif|jpeg)$/,
    51.         use: [
    52.           { 
    53.             loader: 'url-loader',
    54.             options: { 
    55.               // 限制大小为20kb，默认是8kb
    56.               limit: 20480,
    57.               //name: 'img/[name].[hash:8],[ext]'
    58.             }
    59.           }
    60.         ]
    61.       }
    62.     ]
    63.   }
    64. };

    url-loader里有个options的limit参数，这个参数就是限制上传图片的大小，如果上传的图片小于这个大小，webpack则会将这个图片资源利用base64转码成为字符串然后在浏览器前台进行显示

  5. 利用webpack将项目整体打包

    npm run build

8、利用webpack的file-loader结合url-loader打包图片资源

因为url-loader打包的图片资源会有limit限制，图片大小在limit以下的资源会被base64转换为字符串编码，而大于limit以上的资源则会被以文件的形式存到项目里面，所以这个时候就需要用到file-loader，所以url-loader和file-loader最好是同时进行使用的。

  1. 在项目根目录新建img包用于存放图片
  2. 在需要图片的地方引入图片

  3. 利用npm命令安装file-loader

    1. npm install file-loader@3.0.1 --save-dev

  4. 在webpack.config.js里配置

    1. //从node的系统模块中获得path
    2. const path=require('path');
    4. //指定webpack打包的起点（来源）和终点（目的地）
    5. module.exports={ 
    6.   //起点字符串路径
    7.   entry:'./src/main.js',
    8.   //终点对象
    9.   output:{ 
    10.     //路径（拼接字符串）
    11.     path:path.resolve(__dirname,'dist'),
    12.     //生成的文件名
    13.     filename:'bundle.js',
    14.     // 是dist目录作为静态资源的根目录
    15.     publicPath:'dist/'
    16.   },
    17.   module: { 
    18.     rules: [
    19.       // css-loader
    20.       { 
    21.         //正则表达式匹配所有以.css结尾的文件
    22.         test: /\.css$/,
    23.         //style-loader是将css样式作用到DOM上
    24.         //css-loader是将css文件处理
    25.         //加载的顺序是从右往左加载
    26.         use: [ 'style-loader', 'css-loader' ]
    27.       },
    28.       // less-loader
    29.       { 
    30.         //正则表达式匹配所有以.less结尾的文件
    31.         test: /\.less$/,
    32.         //加载的顺序是从右往左加载
    33.         //less-loader将less文件编译成css
    34.         //css-loader将css文件转换为浏览器可读的文件
    35.         //style-loader将样式添加到DOM上
    36.         /*use: [ 'style-loader', 'css-loader','less-loader' ]*/
    37.         use:[
    38.           { 
    39.             loader:'style-loader'
    40.           },
    41.           { 
    42.             loader:'css-loader'
    43.           },
    44.           { 
    45.             loader:'less-loader'
    46.           },
    47.         ]
    48.       },
    49.       // url-loader和file-loader
    50.       { 
    51.         // 匹配png/jpg/gif/jpeg等图片资源
    52.         test: /\.(png|jpg|gif|jpeg)$/,
    53.         use: [
    54.           { 
    55.             loader: 'url-loader',
    56.             options: { 
    57.               // 限制大小为20kb，默认是8kb
    58.               limit: 20480,
    59.               // 打包后的图片的命名规则
    60.               name: 'img/[name]_[hash:8].[ext]'
    61.             }
    62.           }
    63.         ]
    64.       }
    65.     ]
    66.   }
    67. };

    因为file-loader和url-loader基本上是在一起用的，所以就可以直接写到url-loader里。同时注意name里的命名规则：img/表示存到终点根目录的img目录下，[name]文件名就是原文件名，[hash:8]表示利用hash算法存8位hash值，[ext]表示扩展名依旧是原有扩展名。加上了hash值的目的是为了防止打包后同名的图片会进行覆盖。

  5. 利用webpack命令将项目整体打包

    1. npm run build

9、利用webpack的babel-loader将ES6语法转换为ES5

虽然现在绝大多数浏览器都已经支持ES6语法了，但是为了兼容所有浏览器，ES5的语法基本上可以在所有浏览器上运行。babel工具可以帮助我们将ES6语法的代码直接转换为ES5的代码，这样就可以保证基本上所有的浏览器都可以运行。

  1. 正常写ES6的代码

  2. 利用npm安装babel-loader和babel的核心工具

    1. npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

  3. 在webpack.config.js里配置

    1. //从node的系统模块中获得path
    2. const path=require('path');
    4. //指定webpack打包的起点（来源）和终点（目的地）
    5. module.exports={ 
    6.   //起点字符串路径
    7.   entry:'./src/main.js',
    8.   //终点对象
    9.   output:{ 
    10.     //路径（拼接字符串）
    11.     path:path.resolve(__dirname,'dist'),
    12.     //生成的文件名
    13.     filename:'bundle.js',
    14.   },
    15.   module: { 
    16.     rules: [
    17.       { 
    18.         // 匹配以.js为后缀的文件
    19.         test: /\.js$/,
    20.         // 排除（不匹配）node_modules或者bower_components
    21.         exclude: /(node_modules|bower_components)/,
    22.         use: { 
    23.           loader: 'babel-loader',
    24.           options: { 
    25.             presets: ['es2015']
    26.           }
    27.         }
    28.       }
    29.     ]
    30.   }
    31. };

  4. 利用webpack将整个项目打包

    1. npm run build

发表评论

表情：
评论列表 （有 0 条评论，573人围观）

还没有评论，来说两句吧...

相关阅读

    相关 webpack入门

    webpack可以打包的不仅仅是js了，css，sass，图片都可以进行打包， 下面有入门的一步一步的简单示例： 概念：webpack是模块加载器兼打包工具，它能

    ゞ 浴缸里的玫瑰ゞ 浴缸里的玫瑰/ 0 赞/ 307 阅读

    相关 Webpack入门

    Webpack入门 简介 Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。 范例项目 包含两个页

    小灰灰小灰灰/ 0 赞/ 372 阅读

    相关 Webpack 入门

    为什要使用WebPack     现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出

    系统管理员系统管理员/ 0 赞/ 543 阅读