经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » JavaScript » 查看文章
【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序
来源：cnblogs　　作者：我爱科技论坛　　时间：2018/10/21 20:21:10　　对本文有异议

1.webpack-dev-server插件的基本使用

入门程序

  1. const path = require('path');
  4. // 导出一个Webpack的配置对象（通过node中的模块操作，向外暴露了一个配置对象）
  5. module.exports = {
  6.     // 需要在这里手动指定入口  和 出口
  7.     entry : path.join(__dirname, './src/main.js'),              // 入口：表示要使用webpack打包那一个文件
  8.     output : {
  9.         // 输出文件的相关配置
  10.         path : path.join(__dirname, './dist'),                  // 出口：表示打包好的文件，要输出到哪一个目录中去
  11.         filename : 'bundle.js'                                  // 指定输出的文件名称
  12.     }
  13. }
  16. // ===========================================================
  17. // 当我们敲下命令：webpack 之后执行的操作
  18. // 1. 并没有通过命令的方式来指定入口和出口
  19. // 2. 首先获取寻找一个webpack.config.js 这个文件
  20. // 3. 如果存在的话，就回去解析执行这一个文件， 当解析执行完配置文件之后，就得到了配置文件中导出的配置文件对象
  21. // 4. 当webpack拿到了配置对象之后，就拿到了指定的如何出口，然后开始进行打包构建项目
  22. // 5. 需要package.json 文件中配置"scripts": {
  23. //     "test": "echo \"Error: no test specified\" && exit 1",
  24. //     "dev" : "webpack-dev-server"
  25. //   }
  26. // 然后就可以通过执行命令：  npm run dev 的命令来启动webpack-dev-server 这个工具了
  27. // 6. 需要在本地安装一下webpack 这个（本地安装，不是全部安装）
  28. // ===========================================================

main.js

  1. // 这是项目中JS的入口文件
  2. // 1. 导入jquery(从node_models 中引入JQuery这个包， 这是ES6中的一个导入模块的方式)
  3. // 直接使用的话，浏览器会不支持这个，会报错！！！
  4. import $ from 'jquery';
  5. // 类似于jQuery的也是不支持的
  6. // const $ = require('jquery');
  9. $(function () {
  10.     // 设置隔行变色的效果
  11.     $('li:odd').css('backgroundColor', 'black');
  12.     $('li:even').css('backgroundColor', function () {
  13.         return '#' + '097634';
  14.     });
  15. });


// ===========================================================
// 知识点总结：
// 基于Webpack的项目的优点？？？
// 1. 可以处理JS文件中的 相互依赖关系
// 2. webpack能够处理js的兼容问题（包括ES6的一些新的特性， 可以把一些高级的浏览器的语法转换为一些低级的，浏览器可以正常识别的语法）
// 3. webpack 要打包的文件路径  输出文件的路径信息
// ===========================================================


// ===========================================================
// 1. 使用webpack-dev-server （类似于nodemon 这个工具）  这个工具可以实现自动打包编译的功能
// 2. 这个工具的用法和webpack的用法， 完全一样
// 3. 由于是在项目中安装的webpack-dev-server, 因此无法把这个当做一个脚本命令在cmd等终端命令中来使用（需要使用bpm install --save -g）
// 4. 运行成功之后，默认是可以直接通过地址:http://localhost:8080/ 这个URl地址来访问了
// 5. 注意webpack-dev-server 帮我们打包生成的bundle.js 文件， 并没有存放在实际的物理磁盘中，而是直接托管到了电脑的内存中了，因此在我们项目的根目录下面，根本找不到这一二个打包好的bundle.js文件
// 6. 这个工具实际上是以一种虚拟的方式，把代码托管到哦咱们的项目的根目录中了，虽然看不到，但是可以认为他存在约dist src node_models 同级别下面，名称文bundle.js 文件
// 7. 这样做的好处：：一个字---块！！！（如果放在磁盘中，也会消耗磁盘读写速度！！！）
// ===========================================================

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Webpack的使用</title>
  6.     <!--不推荐在这里引入任何js和CSS文件, main.js中的一些新的语法， 但是浏览器不支持， 可以通过webpack这个前端构建工具，
  7.         解决方案： 可以通过引入webpack生成的bundle.js文件来实现ES6的一些新的语法（浏览器兼容）
  8.     -->
  9.     <!--<script src="main.js"></script>-->
  10.  
  11.  
  12.     <!--
  13.     1. 注意事项: 由于页面中引入的 bundle.js 文件实际上不是这一个bunlde.js 文件（是处于根目录下面的一个虚拟地址下面的bundle.js 文件，
  14.     如果这里直接引入自己定义生成的../dist/bundle.js 文件，后面也是无法正常访问到这一个文件的 ）
  15.     2. 为了实现页面的实时代码更新后的实时刷新功能，需要在这里依然怒根路径下面的那一个 bundle.js 文件（关键）
  16.     -->
  17.     <!--<script src="../dist/bundle.js"></script>-->
  18.     <script src="/bundle.js"></script>
  19. </head>
  20. <body>
  21.     <!--这个是欢迎页面-->
  22.     <ul>
  23.         <li>这是第0个li</li>
  24.         <li>这是第1个li</li>
  25.         <li>这是第2个li</li>
  26.         <li>这是第3个li</li>
  27.         <li>这是第4个li</li>
  28.         <li>这是第5个li</li>
  29.         <li>这是第6个li</li>
  30.         <li>这是第7个li</li>
  31.         <li>这是第8个li</li>
  32.         <li>这是第9个li</li>
  33.     </ul>
  34. </body>
  35. </html>

package.json

  1. {
  2.   "name": "VUEJS",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "directories": {
  7.     "lib": "lib"
  8.   },
  9.   "scripts": {
  10.     "test": "echo \"Error: no test specified\" && exit 1",
  11.     "dev": "webpack-dev-server"
  12.   },
  13.   "keywords": [],
  14.   "author": "",
  15.   "license": "ISC",
  16.   "dependencies": {
  17.     "jquery": "^3.3.1",
  18.     "webpack": "^4.20.2",
  19.     "webpack-cli": "^3.1.2",
  20.     "webpack-dev-server": "^3.1.9"
  21.   },
  22.   "devDependencclsies": {
  23.     "webpack-dev-server": "^3.1.9"
  24.   }
  25. }

1.1 第一种配置配置方法

  1. "scripts": {
  2.   "test": "echo \"Error: no test specified\" && exit 1",
  3.   "dev": "webpack-dev-server --open --port 80 --contentBase src --hot"
  4. },

通过以上命令可以配置端口，根路径信息，热加载信息

 

1.2 第二种配置方法

  1. const path = require('path');
  3. // 2. 启用热更新的第二步
  4. const webpack = require('webpack');
  7. // 导出一个Webpack的配置对象（通过node中的模块操作，向外暴露了一个配置对象）
  8. module.exports = {
  9.     // 需要在这里手动指定入口  和 出口
  10.     entry : path.join(__dirname, './src/main.js'),              // 入口：表示要使用webpack打包那一个文件
  11.     output : {
  12.         // 输出文件的相关配置
  13.         path : path.join(__dirname, './dist'),                  // 出口：表示打包好的文件，要输出到哪一个目录中去
  14.         filename : 'bundle.js'                                  // 指定输出的文件名称
  15.     },
  16.     devServer : {
  17.         // 配置一个对象信息（ dev-server的第二种方式）
  18.         // --open --port 80 --contentBase src --hot
  19.         open : true,            // 设置一下自动打开浏览器
  20.         port : 80,              // 配置一下端口信息
  21.         contentBase : 'src',    // 指定根目录信息
  22.         hot : true,              // 1. 启用热更新的第一步
  23.     },
  24.     plugins : [
  25.         // 3. 配置热更新的第三步, 创建一个热更新的模块对象
  26.         new webpack.HotModuleReplacementPlugin()
  27.     ]
  28. }

 

2.html-webpack-plugin插件的基本作用

  1. const path = require('path');
  3. // 2. 启用热更新的第二步
  4. const webpack = require('webpack');
  6. // 导入可以在内存中生辰HTML页面的插件
  7. // 【插件的主要作用】：
  8. // 1. 自动在内存中根据指定的页面生成一个在内存中的页面
  9. // 2. 会自动将打包好的bundle.js 这个文件追加在页面上去
  10. const htmlWebpackPlugin = require('html-webpack-plugin');
  14. // 导出一个Webpack的配置对象（通过node中的模块操作，向外暴露了一个配置对象）
  15. module.exports = {
  16.     // 需要在这里手动指定入口  和 出口
  17.     entry : path.join(__dirname, './src/main.js'),              // 入口：表示要使用webpack打包那一个文件
  18.     output : {
  19.         // 输出文件的相关配置
  20.         path : path.join(__dirname, './dist'),                  // 出口：表示打包好的文件，要输出到哪一个目录中去
  21.         filename : 'bundle.js'                                  // 指定输出的文件名称
  22.     },
  23.     devServer : {
  24.         // 配置一个对象信息（ dev-server的第二种方式）
  25.         // --open --port 80 --contentBase src --hot
  26.         open : true,            // 设置一下自动打开浏览器
  27.         port : 80,              // 配置一下端口信息
  28.         contentBase : 'src',    // 指定根目录信息
  29.         hot : true,              // 1. 启用热更新的第一步
  30.     },
  31.     plugins : [
  32.         // 3. 配置热更新的第三步, 创建一个热更新的模块对象
  33.         new webpack.HotModuleReplacementPlugin(),
  34.         // 【注意事项】 当我们使用了这个html-webpack-plugin 之后， 我们就不需要手动处理bundle.js 的引用路径信息了，因为这个插件已经帮我们自动创建了一个合适的script标签，并且引入了正确的路径信息（内存中的 bundle.js）
  35.         new htmlWebpackPlugin({
  36.             // 创建一个在内存中生成html的插件
  37.             template : path.join(__dirname, './src/index.html'),            // 指定一个模板页面，将来会文件指定的页面路径，去生成内存中的页面
  38.             filename : 'index.html'          // 新生成的html文件的名称
  39.         })
  40.     ]
  41. }

 

3. 使用loader配置处理CSS样式表的第三方插件

第一步：安装 css-loader, style-loader

第二步：使用ES6的语法引入样式文件

  1. // 2. 使用import语法导入CSS的样式表（ 非js模块）
  2. // webpack 默认只能打包处理JS类型的文件，无法处理其他的非JS类型的文件
  3. // 如果需要处理非js的文件，需要安装一些合适的第三方加载器
  4. // 2.1 CSS文件的加载器： 安装 style-loader css-loader
  5. // 2.2 在webpack.config.js这个配置文件上面，新增一个配置节点，叫做module, 添加一个rules属性， 这个数组中存放了一些匹配和一些处理规则
  6. import './css/index.css'
  7. 第三步：配置webpack.config.js
  8. module : {
  9.     // 这个节点用于配置所有的第三方模块加载器
  10.     rules : [
  11.         //  在这里配置所有第三方的匹配规则,（匹配所有以.css结尾的文件）
  12.         {
  13.             test : /\.css$/,
  14.             use : ['style-loader', 'css-loader']    
  15. // 对所有的CSS格式的文件实现一个CSS样式处理（使用加载器进行处理css样式的文件）
  16.         }
  17.     ]
  18. }

 

4. 使用loader配置处理less文件的第三方插件

第一步：安装less， less-loader

第二步：使用ES6导入less文件

  1. module : {
  2.     // 这个节点用于配置所有的第三方模块加载器
  3.     rules : [
  4.         //  在这里配置所有第三方的匹配规则,（匹配所有以.css结尾的文件）
  5.         {
  6.             test : /\.css$/,
  7.             // 注意这些CSSloader的调用方式是从右到左的顺序来调用的
  8.             use : ['style-loader', 'css-loader']    
  9. // 对所有的CSS格式的文件实现一个CSS样式处理（使用加载器进行处理css样式的文件）
  10.         },
  11.         {
  12.             // less 也是一种未编译的CSS
  13.             test : /\.less$/,
  14.             //  先编译成css文件，然后执行上面的cdd步骤
  15.             use : ['style-loader', 'css-loader', 'less-loader']
  16.         }
  17.     ]
  18. }

 

5.使用webpack配置处理scss文件的第三方插件

第一步：安装sass-loader，node-sass

第二步：使用Es6语法导入模块信息

  1. // 4. 导入scss文件
  2. import './css/index.scss'
  3. 第三步：配置加载器loader
  4. module : {
  5.     // 这个节点用于配置所有的第三方模块加载器
  6.     rules : [
  7.         //  在这里配置所有第三方的匹配规则,（匹配所有以.css结尾的文件）
  8.         {
  9.             test : /\.css$/,
  10.             // 注意这些CSSloader的调用方式是从右到左的顺序来调用的
  11.             use : ['style-loader', 'css-loader']    
  12. // 对所有的CSS格式的文件实现一个CSS样式处理（使用加载器进行处理css样式的文件）
  13.         },
  14.         {
  15.             // less 也是一种未编译的CSS
  16.             test : /\.less$/,
  17.             //  先编译成css文件，然后执行上面的cdd步骤
  18.             use : ['style-loader', 'css-loader', 'less-loader']
  19.         },
  20.         {
  21.             // 处理SCSS格式样式表信息
  22.             test : /\.scss$/,
  23.             use : ['style-loader', 'css-loader', 'sass-loader']
  24.         }
  25.     ]
  26. }

 

6.Webpack中url-loader 的使用

6.1 图片的处理

第一步：安装url-loader, file-loader

第二步：开始配置参数信息

  1. module : {
  2.     // 这个节点用于配置所有的第三方模块加载器
  3.     rules : [
  4.         //  在这里配置所有第三方的匹配规则,（匹配所有以.css结尾的文件）
  5.         {
  6.             test : /\.css$/,
  7.             // 注意这些CSSloader的调用方式是从右到左的顺序来调用的
  8.             use : ['style-loader', 'css-loader']    // 对所有的CSS格式的文件实现一个CSS样式处理（使用加载器进行处理css样式的文件）
  9.         },
  10.         {
  11.             // less 也是一种未编译的CSS
  12.             test : /\.less$/,
  13.             //  先编译成css文件，然后执行上面的cdd步骤
  14.             use : ['style-loader', 'css-loader', 'less-loader']
  15.         },
  16.         {
  17.             // 处理SCSS格式样式表信息
  18.             test : /\.scss$/,
  19.             use : ['style-loader', 'css-loader', 'sass-loader']
  20.         },
  21.         {
  22.             test : /\.(jpg|png|gif|bmp|jpeg)$/,
  23.             // 1. 由于file-loader 是url-loader内部支持的，因此不需要在这里引入， 一个loader是不需要使用数组的
  24.             // 2. 这里的传参类似于URL传参
  25.             // 3. limit给定的值是图片的大小，如果图片大小（单位byte）大于或者等于给定的limit值，则不会转换为base64编码格式的值
  26.             // 4. 如果小于的limit， 就会被转换为base64编码的字符串
  27.             // 5. 为了实现图片的名字不被修改， 这里需要配置一下图片的参数信息(后面的会覆盖掉前面的图片)
  28.             // 6. 为了实现不同文件夹下面的同名文件不能冲突，这里需要随机生成一个hash值(默认是一个32位的，这里只取出前面的8位数)
  29.             use : 'url-loader?limit=3276&name=[hash:8]-[name].[ext]'
  30.         }
  31.     ]
  32. }

6.2 字体文件的处理

第一步：安装url-loader

第二步：导入bootstrap样式文件

  1. // 5. 导入bootstrap样式(如果需要使用路径的方式来引入node_models中的 相关文件，
  2. // 可以直接省略 node_models这个目录，然后跟上路径信息， 不写node_models也是可以的)
  3. import 'bootstrap-3.3.5/dist/css/bootstrap.css'
  4. 第三步：配置字体文件的参数
  5. module : {
  6.     // 这个节点用于配置所有的第三方模块加载器
  7.     rules : [
  8.         //  在这里配置所有第三方的匹配规则,（匹配所有以.css结尾的文件）
  9.         {
  10.             test : /\.css$/,
  11.             // 注意这些CSSloader的调用方式是从右到左的顺序来调用的
  12.             use : ['style-loader', 'css-loader']    // 对所有的CSS格式的文件实现一个CSS样式处理（使用加载器进行处理css样式的文件）
  13.         },
  14.         {
  15.             // less 也是一种未编译的CSS
  16.             test : /\.less$/,
  17.             //  先编译成css文件，然后执行上面的cdd步骤
  18.             use : ['style-loader', 'css-loader', 'less-loader']
  19.         },
  20.         {
  21.             // 处理SCSS格式样式表信息
  22.             test : /\.scss$/,
  23.             use : ['style-loader', 'css-loader', 'sass-loader']
  24.         },
  25.         {
  26.             test : /\.(jpg|png|gif|bmp|jpeg)$/,
  27.             // 1. 由于file-loader 是url-loader内部支持的，因此不需要在这里引入， 一个loader是不需要使用数组的
  28.             // 2. 这里的传参类似于URL传参
  29.             // 3. limit给定的值是图片的大小，如果图片大小（单位byte）大于或者等于给定的limit值，则不会转换为base64编码格式的值
  30.             // 4. 如果小于的limit， 就会被转换为base64编码的字符串
  31.             // 5. 为了实现图片的名字不被修改， 这里需要配置一下图片的参数信息(后面的会覆盖掉前面的图片)
  32.             // 6. 为了实现不同文件夹下面的同名文件不能冲突，这里需要随机生成一个hash值(默认是一个32位的，这里只取出前面的8位数)
  33.             use : 'url-loader?limit=3276&name=[hash:8]-[name].[ext]'
  34.         },
  35.         {
  36.             // 用于处理bootstrap中的字体文件的loader项
  37.             test : /.(ttf|eot|svg|woff|woff2)$/,
  38.             use : 'url-loader'
  39.         }
  40.     ]
  41. }

 

 

6.  Webpack中Babel的配置

第一步：使用ES6的语法编写代码

  1. import $ from 'jquery';
  2. import './css/index.css'
  3. import './css/index.less'
  4. import './css/index.scss'
  5. import 'bootstrap-3.3.5/dist/css/bootstrap.css'
  6.  
  7.  
  8.  
  9. // class 关键字是ES6中提供的新的语法，是用来实现ES6中面向对象编程的方式
  10. class Person {
  11.     // 1. static关键字用于创建静态属性
  12.     // 2. 所谓的静态属性就是可以直接通过类名+info的方式来直接获取的方式
  13.     // 3. 实例属性是只能通过类的实例对象才可以访问的属性
  14.     static info = {name : 'zhangsan', age : 12}
  15. }
  17. // 实现面向对象的编程(Class 是从后端语言借鉴过来的，来实现面向对象编程的)
  18. var pl = new Person();
  21. // 在Webpack中默认只能处理一部分ES6的新语法，一些更高级的Es6语法和ES7语法，Webpack是处理不了的；这时候，借助于第三方的loader，来帮助webpack来处理
  22. // 这些高级的语法，当第三方的loader把高级语法转换为低级语法之后，会把结果交给webpack去打包到bundle.js 中去
  23. console.log(Person.info);
  27. // ===================================================================
  28. // 1. webpack中安装Babel可以把高级语法转换为低级语法
  29. //      1.1 npm install babel-core babel-loader babel-plugin-transform-runtime --save
  30. //      1.2 npm install babel-preset-env babel-preset-stage-0 --save
  31. // 2. 在webpack的配置文件中， module几点下的rules数组中，添加一个新的匹配规则
  32. //      2.1 {test : /\.js$/, use : 'babel-loader', exclude : /node_models/}
  33. //      2.3 在配置babel的时候，必须把node_models目录， 通过exclude 选项排除
  34. //      2.4 如果不排除的话， 会非常消耗计算机的CPU，， 同时打包速度非常慢
  35. //      2.5 即使把node_models 中的JS全部转换完毕了，项目也无法正常运行
  36. // 3. 在项目的根目录中，新建一个叫做.babelrec 的Babel的JSON配置文件，这个配置文件博旭符合JSON规范
  37. // {
  38. //     "presets" : [],
  39. //     "plugins" : ["transform-runtime"]
  40. // }
  41. // ===================================================================
  42. 第一套是一个转换器，第二个是一个语法之间的转换对应关系
  43. Babel-preset-env 是一个比较新的ES语法，之前，安装的是babel-preset-es2015,目前的这个babel-preset-env中包含了所有的和ES相关的语法。（语法范围更广）

第二步：安装相关的依赖（注意包的版本号）

  1. "dependencies": {
  2.   "babel-core": "^6.26.3",
  3.   "babel-loader": "^7.1.5",
  4.   "babel-plugin-transform-runtime": "^6.23.0",
  5.   "babel-preset-env": "^1.7.0",
  6.   "babel-preset-stage-0": "^6.24.1",
  7.   "bootstrap": "^3.3.5",
  8.   "css-loader": "^1.0.0",
  9.   "file-loader": "^2.0.0",
  10.   "html-webpack-plugin": "^3.2.0",
  11.   "jquery": "^3.3.1",
  12.   "less": "^3.8.1",
  13.   "less-loader": "^4.1.0",
  14.   "node-sass": "^4.9.3",
  15.   "sass": "^1.14.2",
  16.   "sass-loader": "^7.1.0",
  17.   "save": "^2.3.2",
  18.   "style-loader": "^0.23.1",
  19.   "url-loader": "^1.1.2",
  20.   "webpack": "^4.20.2",
  21.   "webpack-cli": "^3.1.2",
  22.   "webpack-dev-server": "^3.1.9"
  23. },
  24. 第三步：新建一个.babelrc文件并配置
  25. {
  26.   "presets": ["env", "stage-0"],
  27.   "plugins": ["transform-runtime"]
  28. }
  30. 第四步：配置webpack.config.js 文件
  31. {
  32.     // 用于转换ES的高级语法到高级语法
  33.     test : /\.js$/,
  34.     use : 'babel-loader',
  35.     exclude : /node_modules/
  36. }

 

7.webpack调用第三方loader插件的过程

// ===========================================================
// Webpack处理第三方文件类型的过程：
// 1. 如果发现文件类型不是js文件，就去配置文件中查找有没有第三方loader 的规则
// 2. 如果找到了对应的规则，就回去调用对应的 loader 处理这种文件类型
// 3. 在调用loader的时候，是按照数组中“从后往前”的顺序来执行处理调用的
// 4. 当最后的一个loader调用完毕，就会把处理的结果，直接交给webpack进行打包合并， 最终输出到bundle.js 这个文件中去
// ===========================================================

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号