【Webpack】基本使用方法

逆旅行天涯

于 2024-09-03 09:30:47 发布

阅读量505

点赞数 8

分类专栏： webpack 文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/aaaa_aaab/article/details/141849348

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考视频：

30 分钟掌握 Webpack_哔哩哔哩_bilibili

什么是webpack

简单来说就是一个打包工具，

可以将互相依赖的html、css、js以及图片字体等资源文件，经过处理打包成一个可执行的项目文件

🌰看例子

环境初始化

在需要使用webpack的文件夹下，

首先执行npm init -y初始化，其中-y表示所有选项使用默认值

再执行npm add webpack webpack-cli --dev将webpack安装到开发者环境中

这样我们就能获得初始的开发环境

基础的例子

新建一个 'src' 文件夹，然后在里面新建一个 'index.js'

console.log("hello word")

编写一个简单的console.log调试功能，同时将这个文件引入 'index.html'

<body>
		<h1>hello world</h1>
		<script src="./index.js"></script>
	</body>

执行一下，类似这样

所以现在我们就能打包这个文件了

执行命令 npx webpack

可以看到生成了 'dist/main.js'

其中main.js就是webpack打包后的内容，可以看到和我们写的console.log一致

所以接下来体验一下webpack整合代码的功能

在src下再写一个文件data.js

然后修改index.js为调用这个getData()函数

然后再执行npx webpack打包代码

可以看到main.js中的代码简化了

说明webpack智能地判断了代码的逻辑，通过import获取了代码，知道我们只打印了这个数组，所以整合到一起的代码就如上图所示

✨配置webpack

这里才是学习webpack的重头戏，毕竟在webpack配置完成后，每次只要执行npx webpack便能智能地完成打包

初步配置

在根目录下新建一个'webpack.config.js'文件

const path=require('path')

module.exports={
	//环境配置   development开发者    production  生产者
	mode:"development",
//方便查看源代码
devtool:"inline-source-map"，
	//入口文件
	entry:"./src/index.js",
	//打包文件名
	output:{
		//文件名
		filename:"dist.js",
		//文件路径
		path:path.resolve(__dirname,"dist")
	}
}

其中

mode，选择了开发者模式
entry，选择了相对于config文件的src目录下的index.js作为入口文件
output, 对于输出配置了输出的名字，并且使用了自带的path配置了输出目录

执行npx webpack，可以看到不仅重新输出了dist.js，其中的内容也和之前的有了不一样

打包CSS文件和图片

要先安装 npm add --dev style-loader css-loader

然后要在webpack.config.js里对需要引入的文件名进行配置，如css文件的配置如下

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

同理要多配置图片文件则再写一个rules中的元素即可

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },

所以在入口文件index.js中引入style.css和图片assets/images/avater.jpg即可

使用webpack插件自动生成html文件

还是安装

npm add html-webpack-plugin --dev

然后导入webpack.config.js文件

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

再进行配置即可

  plugins:[
    new HtmlWebpackPlugin()
  ],

所以这时候再执行打包命令，可以看到输出文件夹下还多了一个index.html

这个HTML的标题默认为Webpack App

我们也可以对这个进行配置

兼容低版本浏览器

要让新的JavaScript的特性兼容低版本的浏览器，需要用到babel，而webpack也支持相应的loader

所以首先还是安装

npm add --dev babel-loader @babel/core @babel/preset-env

这三个包提供了我们需要的功能

然后再进行下面的配置

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"],
    },
  },
},

压缩打包后的js代码

同样是两步，先安装

npm add --dev terser-webpack-plugin

然后引入和配置

const TerserPlugin = require("terser-webpack-plugin")

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },

无需执行命令自动打包

现在每次修改了代码后都得重新执行打包命令

webpack也提供了一个插件能在保存后自动打包

还是先安装

npm add --dev webpack-dev-server

然后先在webpack.config.js中进行配置

  devServer: {
    static: "./dist",
  },

再在package.json中进行配置

  "scripts": {
    "start": "webpack serve --open"
  },

这样在我们执行npm start的时候就会自动执行webpack serve

并且通过 npm start 打开的网页能在我们修改保存后自动刷新页面

避免浏览器缓存js文件

由于现在每次生成的文件名都是dist.js，所以浏览器会对这个文件进行缓存，进而不更新

为了避免进行缓存，可以给文件名添加一段随机的字符，每次更新后都生成新的随机字符

所以在webpack.config.js中配置输出即可

output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },

配置可视化打包工具

这是一个帮助分析的工具，它会可视化地展现打包过程中哪个文件占的体积比较大

所以同样的，先是安装这个插件

npm add --dev webpack-bundle-analyzer

接着在配置中引入这个插件

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer");

以及在plugins中添加它

  plugins: [
    new HtmlWebpackPlugin({
      title: "test",
    }),
    new BundleAnalyzerPlugin.BundleAnalyzerPlugin()
  ],

所以此时再运行npx webpack

自动跳出了这样的文件分析图

逆旅行天涯

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【Webpack】基本使用方法

简单来说就是一个打包工具，可以将互相依赖的html、css、js以及图片字体等资源文件，经过处理打包成一个可执行的项目文件。
复制链接

扫一扫

专栏目录