快速入门Webpack的简单使用

编程语言 2022-01-02 15:29:19 阅读次数: 0

前言

大家好呀，我是小浪，这次给大家带来的是我以前学习webpack如何使用的时候的学习总结，希望能够帮助到有需要的朋友，在学校里的事挺多的，所以好久都没有在掘金发文章。要放假了，继续坚持学习，刷到林三心大佬的B站视频，三心大佬他自己写文章然后去分享给他人，是一种快速学习的途径，我认为对于我来说也是十分正确，在分享的同时自己印象也会深刻

Webpack简介：

Webpack是目前主流的前端工程化解决方案之一

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的

前期准备

安装

在项目中安装webpack + webpack-cli，使用 -D 相当于 --save-dev

-D 写入到package.json中 devDependencies进行添加，表示我们只有在开发阶段才使用到

-S 相当于 --save 写入到 dependencies 对象，表示开发环境和生产都使用

如果项目没有 package.json 使用 npm init -y 快速配置一下

npm install [email protected] [email protected] -D 
复制代码
 "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.9.0"
 }
复制代码

配置启动命令

在package.json配置 scripts

"scripts": {
    "dev": "webpack",
},
复制代码

在命令行我们就使用 npm run dev 来启动 webpack命令

基本使用

创建webpack.config.js文件

在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

设置mode

module.exports = {
  mode: 'development',
}
复制代码

mode 可选值有两个，分别是：

development

  • 开发环境
  • 不会对打包生成的文件进行代码压缩和性能优化
  • 打包速度快，适合在开发阶段使用

production

  • 生产环境
  • 会对打包生成的文件进行代码压缩和性能优化
  • 打包速度很慢，仅适合在项目发布阶段使用

设置入口和出口

webpack 4.x 和 5.x 中默认约定：

  • 默认入口文件为 src -> index.js
  • 默认输出文件 dist -> main.js

我们可以在webpack.config.js中自定义

entry：打包的入口

output：打包的出口

我们就可以像下面一样设置

module.exports = {
  entry: './src/index.js', //打包入口文件路径
  output: './dist/mian.js', //输出文件路径
}
复制代码

还是这样写比较好，使用path模块来拼接路径

const path = require('path')
module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
  output: {
    path: path.join(__dirname, './dist'), //输出文件路径
    filename: 'js/bundle.js', //把生成的bundle.js放在dist/js/bundle.js下面
  },
}
复制代码

webpack-dev-server简单使用

当修改了源代码，webpack 会自动进行项目的打包和构建，这个就不用每次自己去npm run dev了

webpack-dev-server 提供热更新的开发服务器

安装

npm install [email protected] -D
复制代码

安装完毕之后可通过 webpack serve 启动

配置

方便webpack-dev-server的启动我们在package.json的scripts新加一个命令

"scripts": {
    "serve": "webpack serve",
},
复制代码

在webpack.config.js配置端口，devServer可配置的选项有很多，我在这里就配置一个端口

module.exports = {
  devServer: {
    port: 8080,
  },
}
复制代码

devServer.compress，启用gzip压缩。

devServer.contentBase，告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。

devServer.host，指定host。使用0.0.0.0可以让局域网内可访问。

devServer.hot，启用 webpack 的模块热替换特性（Hot Module Replacement）。

devServer.hotOnly，构建失败的时候是否不允许回退到使用刷新网页。

devServer.inline，模式切换。默认为内联模式，使用false切换到iframe模式。

devServer.open，启动webpack-dev-server后是否使用浏览器打开首页。

devServer.overlay，是否允许使用全屏覆盖的方式显示编译错误。默认不允许

devServer.port，监听端口号。默认8080。

devServer.proxy，代理，对于另外有单独的后端开发服务器API来说比较适合。

devServer.publicPath，设置内存中的打包文件的输出目录。区别于output.publicPath。

修改后使用 npm run serve 进行项目的打包

image-20211225133914336

打包完毕后，启动一个实时打包的 http 服务器，提示我们访问 http://localhost:8080/，访问之后就可以查看我们页面效果

打包的文件

打包生成的文件存放到了内存中，因为内存更快，提高实时打包的性能，所以上面设置的output的输出路径是针对没有安装webpack-dev-server来说的

如何访问我们打包好的bundel.js呢，因为 webpack-dev-server 开启了一个服务器，/是项目的根目录，我们直接在地址栏就能访问到bundle.js

image-20211225135310863

插件plugin

通过安装和配置第三方的插件，可以拓展 webpack 使它更强大

html-webpack-plugin

这个插件我们会经常使用到它，将公共的css，js文件插入到html中，可以减少请求次数，达到优化的效果，以通过此插件自定制 index.html 页面的内容。

HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

安装

npm install [email protected] -D
复制代码

配置

在 webpack.config.js 的 plugins 进行配置

var HtmlWebpackPlugin = require('html-webpack-plugin') //1.先导入
const path = require('path')
module.exports = {
  //...
  //在插件中使用 HtmlWebpackPlugin
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), //原文件存放路径
      filename: path.join(__dirname, './dist/index.html'), //输出文件路径
    }),
  ],
}

复制代码

HtmlWebpackPlugin有很多可选的参数，我就说下面三个常用的

title: 生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容

template: 本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)

filename：输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如'./dist/index.html'）

使用

运行命令 npm run dev 就可以看见打包完成

image-20211225142229881

如果是用 npm run serve 就不会有这两个，而是都在内存中，我们可以使用地址栏查看

clean-webpack-plugin

时自动清理掉 dist 目录中的旧文件

安装

npm install [email protected] -D
复制代码

配置

在 webpack.config.js 的 plugins 进行配置

const { ClenWebpackPlugin } = require('clean-webpack-plugin') //引入
module.exports = {
  //...
  plugins: [
    new ClenWebpackPlugin(), //挂载的创建插件实例
  ],
}

复制代码

加载器loader

非 .js 后缀模块webpack默认处理不了只能理解 JavaScript 和 JSON 文件，需要调用loader加载器才可以正常打包

loader 加载器的作用：导出为函数的 JavaScript 模块。比如：

  • css-loader 打包处理 .css 相关的文件
  • less-loader 打包处理 .less 相关的文件
  • babel-loader 打包处理 webpack 无法处理的高级 js 语法

loader调用流程

image-20211225143748510

打包css

安装

npm i [email protected] [email protected] -D
复制代码

配置

其中，test 表示匹配的文件类型（用正则）， use 表示对应要调用的 loader 注意：

  • use 数组中指定的 loader 顺序是固定的
  • loader调用顺序是：从右往左

在 webpack.config.js 的 module 进行配置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}
复制代码

打包less

安装

npm i [email protected] [email protected] -D
复制代码

配置

在 webpack.config.js 的 module 进行配置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader','less-loader],
      },
    ],
  },
}
复制代码

其他的css打包处理也一样安装指定的加载器

打包文件

loader除了能打包css的之外，我们使用 file-loader url-loader还可以对url引用的图片进行处理

安装

npm i [email protected] [email protected] -D 
复制代码

配置

在 webpack.config.js 的 module 进行配置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.jpg|png|gif$/,
        use: {
            loader: 'url-loader',
           	options: {
                limit: 77777,
                outputPath: 'image',
            }
        }
      },
    ],
  },
}
复制代码

options是 loader 的参数项：

limit 用来指定图片的大小，单位是字节（byte）只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

outputPath:是指定的存储文件夹 dist/image 把图片文件统一生成到 image 目录中

babel-loader简单使用

借助于 babel-loader 进行打包处理js中的高级语法

安装

npm i [email protected] @babel/[email protected] @babel/[email protected] -D
复制代码

配置

在 webpack.config.js 的 module 进行配置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
    ],
  },
}
复制代码

注意：记得使用exclude排除掉 /node_modules/下面的模块

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

声明 babel 可用的插件

module.exports = {
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
}
复制代码

打包发布

开发环境打包生成的文件不会进行代码压缩和性能优化，而且存放在内存中，所以在生产环境中打包发布

在 package.json的scripts中新增

"scripts": {
    "build": "webpack --mode production",
},
复制代码

之后使用 npm run build 就直接打包发布了，这个 --model 是 production 代表生产环境，会对打包生成的文件 进行代码压缩和性能优化。 这里覆盖 webpack.config.js 中的 model 选项

webpack创建Vue项目

其实大家使用 vue-cli 和 vue ui 搭建出来的vue项目webpack都帮我们配置好了，这里我介绍下如何用 webpack 创建 vue 项目。

初始化项目目录

建立项目文件夹之后初始化package.json

npm init -y
复制代码

在项目根目录创建webpack配置文件 webpack.config.js 在真正的开发中分开发环境和生产环境，这里为了方便就只写一个。

index.js:入口文件

index.html:入口文件模板

babel.config.js：babel配置文件（先创建之后在说）

项目结构如下：

project_name
|—— src
│    |—— index.js
|    |—— App.vue 
|—— index.html
|—— package.json 
|—— webpack.config.js
|—— babel.config.js
复制代码

安装配置 webpack 相关

安装 webpack webpack-cli webpack-dev-server 依赖

npm install [email protected] [email protected] [email protected] -D 
复制代码

配置 package.json

"scripts": {
    "dev": "webpack",
    "serve": "webpack-dev-server --open --hot",
    "build": "webpack --mode=development --progress --hide-modules",
},
复制代码

配置 webpack.config.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
  output: {
    path: path.join(__dirname, './dist'), //输出文件路径
    filename: 'js/bundle.js', //把生成的bundle.js放在dist/js/bundle.js下面
  },
  devServer: {
    contentBase: path.join(__dirname, './dist'),
    port: 8080, //启动端口
  },
}
复制代码

安装配置 Vue 相关

安装 vue 需要的依赖 vue-loader vue-template-compiler

npm install vue-loader vue-template-compiler -D 
复制代码

如果项目没有 vue 记得装 vue

npm install vue
复制代码

配置 webpack.config.js

注意要引入 VueLoaderPlugin

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
 //...
 module: {
      rules: [
      // ... 其它规则
      {
          test: /\.vue$/,
          loader: 'vue-loader'
      }
      ]
  },
  plugins: [
      new VueLoaderPlugin()
  ]
}
复制代码

安装插件

html-webpack-plugin和clean-webpack-plugin插件，这两个插件我们都上面都有介绍过

安装

npm install [email protected] [email protected] -D
复制代码

配置 webpack.config.js

//...
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    //...
	plugins: [
		new HtmlWebpackPlugin({
     		template:'./index.html',
		}),
        new CleanWebpackPlugin(),
	],
 };
复制代码

安装加载器

style-loader、css-loader、 file-loader url-loader等等我们上面都有介绍如果需要sass、less加载器可自行安装，这里我安装的是sass

npm install [email protected] [email protected] [email protected] [email protected] sass-loader node-sass -D
复制代码

配置 webpack.config.js

sass要把 node_modules 排除

//...

module.exports = {
	//...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
           {
            test: /\.jpg|png|gif$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 77777,
                    outputPath: 'image',
                	}
                }
             },
            {   
              test: /\.sass$/,   
              use:['vue-style-loader', 
                 'css-loader', 'sass-loader' 
              ],   
              include: path.resolve(__dirname + '/src/'),    
              exclude: /node_modules/ 
            },
        ]
    }
}
复制代码

安装bable

这里我安装几个常用的

npm install  babel-loader @babel/core @babel/cli @babel/preset-env -D
npm install  @babel/runtime @babel/plugin-transform-runtime -D
npm install  @babel/plugin-transform-arrow-functions -D
复制代码

配置 webpack.config.js

同样的和上面一样要把 node_modules 排除

//...

module.exports = {
	//...
    module: {
        rules: [
            //...
            {
                test: /\.js$/,
                use: [
                    'babel-loader'
                ],
                exclude: /node_modules/
            },
        ]
    }
}
复制代码

配置 babel.config.js

module.exports = function (api) {
    api.cache(true);
  
    const presets = [
        '@babel/preset-env',
    ];
    const plugins = [
        '@babel/plugin-transform-arrow-functions',
        '@babel/plugin-transform-runtime'
    ];
  
    return {
      presets,
      plugins
    };
  }
复制代码

最后我们就可以通过 npm run serve来启动vue项目了

往期精彩：

快速入手Electron，拥有一个自己的桌面应用

还不会Vue3？一篇笔记带你快速入门

还不会TS？ 带你 TypeScript 快速入门

快速上手Vuex 到 手写简易 Vuex

从了解到深入虚拟DOM和实现diff算法

手写一个简易vue响应式带你了解响应式原理

从使用到自己实现简单Vue Router看这个就行了

前端面试必不可少的基础知识，虽然少但是你不能不知道

猜你喜欢

转载自juejin.im/post/7048497932647006216
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022