webpack

最新推荐文章于 2024-03-01 15:27:00 发布
最新推荐文章于 2024-03-01 15:27:00 发布
阅读量844 收藏 4
点赞数 2
分类专栏： 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43764814/article/details/89643413
版权

webpack基本使用

QQ:634196762 只聊技术的群.没有任何广告.欢迎前端后端加入

webpack官方有两种用法:

  1. 终端使用(需要全局安装webpack)
  2. Node.js的配置文件(可以全局安装也可以在项目中安装)

以下是终端使用的方式, 学习阶段可以尝试一下:

  1. 全局安装webpack(不推荐)

     npm i webpack webpack-cli -g

  2. 调用webpack指令打包编译js文件

    在webpack4中必须通过-o手动指定output

    webpack后第一个参数是入口文件(要打包的文件)

    -o 表示output, 即输出文件

    -d 表示development, 即开发模式, 不压缩混淆

    -p 表示production, 即生产模式, 开启压缩混淆

    如果不指定-d或-p, 则默认使用 -p 开启压缩混淆并在控制台给出警告提示

     webpack ./src/main.js -o ./dist/bundle.js -d

注意: 在控制台中使用webpack不是其官方推荐的方法, 所以可以不需要全局安装webpack, 学习阶段使用一下即可

以下是配置文件的使用方式:

此方式不需要全局安装webpack, 但是需要在每个项目中的开发依赖安装webpack和webpack-cli

  1. 安装webpack和webpack-cli

     npm i webpack webpack-cli -D

  2. 在项目根目录下新建webpack.config.js的配置文件, 进行基本配置(入口和输出)

     const path = require('path');

 module.exports = {
   entry: './src/main.js', // entry是指定打包文件的入口, 可以使用相对路径
   output: {
     path: path.join(__dirname, 'dist'), // output是指输出的目录, 必须是绝对路径
     filename: 'bundle.js'
   },
   mode: 'development'
 }

  3. 在package.json中的scripts节点下, 可以编写一些项目中用的脚本, 在这个地方可以执行项目依赖的指令, 不需要全局安装, 只需要本地安装即可

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

  4. 当配置好scripts之后, 就可以运行npm run build进行项目打包了

     npm run build

webpack-dev-server的使用

以下简称devServer

出现的目的是因为每次修改了文件后, 都需要手动运行npm run build或者全局执行webpack指令重新编译打包

在开发阶段修改代码, 是非常频繁的一个操作, 如果每次修改完代码不能用最高效的方式查看结果, 那么开发起来体验非常不好

所以devServer出现的目的就是为了解决上述问题的, 当开发者修改完代码后自动编译打包, 刷新浏览器, 提高开发效率!!!

  1. 安装webpack-dev-server包在项目的开发依赖

     npm i webpack-dev-server -D

    在安装devServer时, 可能会出现如下警告:

     npm WARN webpack-dev-server@3.1.14 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
 npm WARN webpack-dev-middleware@3.4.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies
 yourself.

    注意: 如果在项目的开发依赖中没有安装 webpack@^4.0.0 就会产生以上警告, 发现了该警告一定要注意安装 webpack

     npm i webpack webpack-cli -D

    如果开始就没有安装webpack在开发依赖, 则可以一次性一起安装

     npm i webpack-dev-server webpack webpack-cli -D

  2. 在package.json的scripts节点下新建一个脚本

     "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "webpack-dev-server",
     "build": "webpack"
   },

  3. 可以直接在终端运行npm run dev开启devServer

     npm run dev

devServer的原理其实是, 在运行的第一次时将入口文件打包编译, 把最终编译的结果放到内存中, 挂载到服务器的根目录下与输出文件名同名的文件, 将来只要代码改变, devServer会自动把结果编译到内存中的输出文件, 同时自动刷新浏览器

devServer的参数

默认开启devServer不会自动打开浏览器, 而且采用的是8080端口, 默认devServer托管的是项目根目录, 而index.html在src目录, 每次修改代码后都会重新编译生成完整的bundle.js

以上问题都可以通过指定不同的参数来解决

  1. 自动打开浏览器

     --open

  2. 设置服务器端口

     --port <端口号>
 --port 3000

  3. 设置默认托管的目录

     --contentBase <路径>
 --contentBase ./src

  4. 开启热替换模块

     --hot

只需要在scripts中的脚本后加上以上参数即可:

"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev": "webpack-dev-server --port 3000 --open --contentBase ./src --hot",
	"build": "webpack"
},

设置devServer参数的第二种方式

修改配置文件:

  1. 导入webpack

     // 热模块替换的插件  HMR  在webpack中内置了
 const webpack = require('webpack')

  2. 配置devServer节点

     devServer: {
     contentBase: "./src", // 托管的根目录
     hot: true, // 我要开启或关闭HMR
     open: true, // 自动打开浏览器
     port: 3000 // 设置devServer的端口号
   },

  3. 如果想开启HMR(热模块替换) 还需要安装一个插件

       plugins: [
     // 装了插件表示当前项目有资格开启HMR
     new webpack.HotModuleReplacementPlugin()
   ],

在webpack的配置中, 装插件的方式都一样, 在plugins节点中创建插件对象即可

html-webpack-plugin插件

目前bundle.js已经托管到内存中了, 但是index.html还是物理磁盘的文件, 而且每次还需要通过contentBase来指定托管的根目录, 程序员还需要操心bundle.js的路径问题

html-webpack-plugin插件主要功能有如下两点:

  1. 在内存中会根据指定的模板生成一份index.html直接托管在服务器的根目录中
  2. 并且还会自动追加一个bundle.js的引用, 在index.html中

所以程序员不需要再操心bundle.js的引用问题了, 写HTML的时候不需要引入bundle.js同样也可以实现js的效果

使用方法:

  1. 装包

     npm i html-webpack-plugin -D

  2. 在webpack.config.js中引入

     const HtmlWebpackPlugin = require('html-webpack-plugin')

  3. 安装插件

     plugins: [
     // 装了插件表示当前项目有资格开启HMR
     new webpack.HotModuleReplacementPlugin(),
     // 安装插件
     // 如果不传入任何配置选项, 默认也会创建一个index.html托管在服务器根路径
     // 只不过这个HTML是空的, title默认是webpack app
     new HtmlWebpackPlugin({
       // title: 'titletitletitletitle!!!', // 如果模板中有title, 会覆盖这里的配置
       template: './src/index.html'
     })
   ],

注意: 如果需要了解更详细的html-webpack-plugin的使用, 请查阅官方文档, 在github或npm都可以搜索到官方仓库

loader的使用

在webpack中默认是只能打包js文件的, 如果需要引入css或其他文件, 则会报错

而且为了减少css的二次请求, webpack允许在main.js中直接import css文件, 将css打包到bundle.js中

但是由于webpack默认不能打包css文件, 所以需要安装第三方loader来加载css文件

css-loader的使用

  1. 安装css-loader和style-loader

     npm i style-loader css-loader -D

  2. 在webpack.config.js文件中进行配置

     module: {
     rules: [
       {
         test: /\.css$/,
         // use: [
         //   { loader: 'style-loader' },
         //   {
         //     loader: 'css-loader',
         //     options: {
         //       modules: true
         //     }
         //   }
         // ]
         // css-loader 用于解析css文件
         // style-loader 用于将css代码 使用js动态的插入到html中, 减少二次请求
         // use使用loader时  顺序是固定的从右到左的加载
         use: ['style-loader', 'css-loader']
       }
     ]
   },
less-loader的使用

  1. 装包

    需要less-loader和less两个包才可以

     npm i less-loader less -D

  2. 配置

     module: {
     rules: [
       {
         test: /\.css$/,
         // use: [
         //   { loader: 'style-loader' },
         //   {
         //     loader: 'css-loader',
         //     options: {
         //       modules: true
         //     }
         //   }
         // ]
         // css-loader 用于解析css文件
         // style-loader 用于将css代码 使用js动态的插入到html中, 减少二次请求
         // use使用loader时  顺序是固定的从右到左的加载
         use: ['style-loader', 'css-loader']
       },
       {
         test: /\.less$/,
         use: ['style-loader', 'css-loader', 'less-loader']
       }
     ]
   },
sass-loader的使用

sass早期是.sass文件

后来更新了一版, 变成了.scss文件

  1. 装包

    注意: node-sass在使用npm时很多时候可能会安装失败, 所以可以选择cnpm或yarn来安装

     npm i node-sass sass-loader -D

  2. 配置

      module: {
     rules: [
       {
         test: /\.css$/,
         // use: [
         //   { loader: 'style-loader' },
         //   {
         //     loader: 'css-loader',
         //     options: {
         //       modules: true
         //     }
         //   }
         // ]
         // css-loader 用于解析css文件
         // style-loader 用于将css代码 使用js动态的插入到html中, 减少二次请求
         // use使用loader时  顺序是固定的从右到左的加载
         use: ['style-loader', 'css-loader']
       },
       {
         test: /\.less$/,
         use: ['style-loader', 'css-loader', 'less-loader']
       },
       {
         test: /\.scss$/,
         use: ['style-loader', 'css-loader', 'sass-loader']
       }
     ]
   },
url-loader的使用

webpack也无法解析图片或字体等文件

所以需要使用url-loader来加载

注意: url-loader是file-loader的升级版, 内部依赖了file-loader, 所以需要安装url-loader和file-loader!

  1. 装包

     npm i url-loader file-loader -D

  2. 配置

      module: {
     rules: [
       {
         test: /\.css$/,
         // use: [
         //   { loader: 'style-loader' },
         //   {
         //     loader: 'css-loader',
         //     options: {
         //       modules: true
         //     }
         //   }
         // ]
         // css-loader 用于解析css文件
         // style-loader 用于将css代码 使用js动态的插入到html中, 减少二次请求
         // use使用loader时  顺序是固定的从右到左的加载
         use: ['style-loader', 'css-loader']
       },
       {
         test: /\.less$/,
         use: ['style-loader', 'css-loader', 'less-loader']
       },
       {
         test: /\.scss$/,
         use: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
         test: /\.(png|jpg|gif|bmp|jpeg)$/,
         use: [
           {
             loader: 'url-loader',
             options: {
               limit: 81920 // 字节 Byte 如果在8192个字节(8KB)内  就使用base64编码
             }
           }
         ]
       },
       {
         test: /\.(eot|svg|ttf|woff|woff2)$/,
         use: [
           {
             loader: 'url-loader'
           }
         ]
       }
     ]
   },

vueday08

babel的配置

  1. 安装babel的核心包和loader, 和语法预设

    由于babel7目前使用还有很多问题

    所以选择使用babel6

    babel-preset-env 核心语法包

    babel-preset-stage-0 ES2015的语法包合集

     npm i babel-loader@7 babel-core babel-preset-env babel-preset-stage-0 -D

  2. 配置loader

     module: {
   rules: [
     { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
   ]
 }

  3. 配置babel

    在.babelrc中进行配置

     {
   "presets": ["env", "stage-0"]
 }

vue-loader的配置

总结梳理： webpack 中如何使用 vue :

  1. 安装vue的包： cnpm i vue -S
  2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
  • 配置vue-loader
  • 安装VueLoaderPlugin在webpack.config.js文件中
  1. 在 main.js 中，导入 vue 模块 import Vue from ‘vue’
  2. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
  3. 使用 import login from ‘./login.vue’ 导入这个组件
  4. 创建 vm 的实例 var vm = new Vue({ el: ‘#app’, render: c => c(login) })
  5. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

CommonJS模块化规范

导入:

require()

导出:

module.exports = {}

ES6模块化规范

  1. 导入(可以导入js/css等其他文件):

    导入js:

     import 变量名 from 包名/路径

    导入css:

     import 路径

  2. 导出

    export

    export default {}

兔子零-A酱
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包
06-06
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块...
VUE-webpack超详细教程
热门推荐
ICanWin_lll的博客
01-21 2万+
一.认识webpack 官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块化和打包两个角度来理解： 模块化： webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用 打包: 合并成一个或多个包(Bundle),并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转
webpack安装和使用及超详细配置一个基本vue项目的全部流程（包括路由、less、引入图片渲染）
weixin_44784401的博客
01-30 6876
webpack安装和使用及超详细配置一个基本vue项目的全部流程（包括路由、less、引入图片渲染）
webpack-cli
最新发布
我的博客简介
03-01 465
是 Webpack 提供的命令行工具，用于在命令行中执行 Webpack 相关的操作。主要完成以下几项工作：负责解析用户在命令行中输入的参数，包括配置文件路径、打包模式、插件等信息。通过解析这些参数，确定如何执行 Webpack 相关的操作。负责读取并解析指定的 Webpack 配置文件（通常是通过读取配置文件，知道如何进行模块打包、资源处理等操作。调用 Webpack API：通过调用 Webpack 提供的 API，将用户输入的参数和配置转化为具体的 Webpack 打包操作。
webpack4.0学习
u014196765的博客
08-13 278
wabpack 概念 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 可以从这里了解更多关于 JavaScript 模块和 webpack 模块的...
Vue2.0开发之——webpack安装与配置(01)
我的博客
10-25 2400
什么是webpackwebpack安装webpack配置morewebpack是前端项目工程化的具体解决方案。
webpack@4--学习记录
weixin_44132428的博客
03-16 1198
webpack学习记录
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack demo
07-13
webpack demo
webpack.md
02-27
自学webpack 笔记 webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。webpack就是识别你的 入口文件。识别你的模块依赖，来打包你的...
webpackDemo
08-23
依据webpack官方文档，指南手册整合得demo，让你充分了解打包得全过程。
webpack文档
07-05
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有...
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
webpack.zip
01-28
1.webpack 分享PPT 2.loader demo 3.plugin demo 4.webpack常用配置demo 5.bapable实现demo
webpack配置文件
09-28
webpack详细配置信息，命令行npm i 可安装运行项目，项目完成之后直接webpack即可将项目打包
webpack中版本兼容性问题错误总结
weixin_42679187的博客
05-07 2869
1.安装webpack-dev-server报错，说需要webpack-cli原因，这两个之中某一个版本太高，重新安装低版本 2.安装webpack-cli之后仍然不能使用 3. npm WARN webpack[email protected] requires a peer of webpack@^4.x.x but none is installed. You must install peer de...
webpack安装以及基础使用
m0_56219678的博客
05-10 1938
webpack安装以及基础使用
webpack搭建vue项目步骤详解
qq_56105902的博客
05-19 271
第一步 执行npm init 命令 初始化出package.json文件 { "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "licen...
webpack 逆向
12-11
Webpack逆向是指通过分析Webpack打包后的代码，还原出Webpack的配置和源代码。这在一些特殊情况下非常有用，例如需要对某个网站进行二次开发或者调试。下面是一些可能有用的工具和步骤： 1. 使用webpack-deep-scope...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值