webpack解密

Webpack 是一款模块打包工具,用于管理和打包现代Web应用中的模块。本文介绍了webpack的基本概念,快速安装步骤,以及如何配置加载CSS、图片和构建本地服务器。重点讲解了配置文件的作用,使用HtmlWebpackPlugin创建HTML文件,并强调了实践和熟悉工具的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、什么是webpack


1. 初识webpack

官网:https://webpack.github.io/
中文网:https://www.webpackjs.com/

Webpack是模块化管理及打包工具/模块打包机( module bundler)。可以把我们写的项目进行打包。一般开始vue项目,都是通过脚手架创建的,创建如下:

运行项目:npm run serve,然后进行开发,这种环境叫开发环境。当项目开发完毕,上线的时候,需要项目进行打包。通过npm run build。因为项目中资源非常多,资源之间的关系也非常复杂。这个时候就需要使用webpack来解决这个问题。
在这里插入图片描述
另外webpack可以把一些高级的语法打包成低级语法,这样浏览器就可以识别。如今的Web可以看做是功能丰富的应用,拥有复杂的js代码和众多有依赖包,为简化开发复杂度,提高开发效率,涌现了大量的实践:

  • es6 模块化
  • 全新的js写法,如ES6、TypeScript、CoffeeScript
  • Less、Sass等css预处理器

这些实践大大的提高了开发效率,但是浏览器不能解析这些代码,需要进行额外的处理才能让浏览器识别,而手动处理又非常繁琐,于是就需要一些专业的工具。

  • Browserify – 实现浏览器端的commonjs模块化,功能比较单一
  • Gulp — 优化项目的一个工具
  • Grunt
  • Webpack — 最好的模块打包机
  • Bower — 类似于npm,管理各种包/模块的
  • Yeoman – 构建项目结构的
  • Fis(百度)-- 和webpack类似
2. 快速安装

在安装node.js的前提下安装webpack

对了,还要检查package.json是否存在,为了方便使用(后面会提)

npm init -y  // 生成package.json,有的哈就不用了
npm install --save-dev webpack
npm install --save-dev webpack@<version>   // 指定版本
// 使用4.0+版本还需要的安装 webpack-cli 
// 此工具用于在命令行中运行 webpack     
npm install --save-dev webpack-cli    

npm install --global webpack // 全局可用

二、webpack使用


1. 快速使用

检查一下package.json文件的配置,没有的话就去安装吧(ノ◕ω◕)ノ
在这里插入图片描述

npm run build // 输入打包vue命令,运行

在这里插入图片描述
如图dist 目录 就是我们打包vue项目得到的,是不是很简单!

2. 配置文件

为什么要配置文件?

在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件 webpack.config.js

考虑到CLI中运行本地的webpack不是很方便,可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script):

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"  //在这里[]~( ̄▽ ̄)~*
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

vue-cli 中安装 webpack 已经默认配置好了,尽量不要动 package.json

vue-cli 是怎么配置 webpack的?
去官网查看:https://cn.vuejs.org/index.html

在这里插入图片描述

进入找到webpack相关,我们都是成熟的人了,要学会看文档(灬°ω°灬)

还有一点,显示配置文件,很重要
在这里插入图片描述

三、配置相关


首先我们知道webpack是很方便的工具,而webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件,

开始引用文档:

1. 加载CSS

为了从 JavaScript 模块中 import 一个 CSS 文件,你需要在 module 配置中 安装并添加 style-loader 和 css-loader:

npm install --save-dev style-loader css-loader
// webpack.config.js
  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };
2. 加载图片

使用 file-loader,我们可以轻松地将图片混合到 CSS 中:

npm install --save-dev file-loader

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

ddd,去官方文档了解更多

3. 构建本地服务器

听起来就高大上,先安装一把

npm install --save-dev webpack-dev-server

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',  //表示要打包的文件
    output: {...
    },
    module: {...
    },
+    devServer: {
+        port: 8080,
+        hot: true
+    }
}

还不够,我们最终也是需要启动一个服务器。需要在package.json,配置脚本

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "start":"webpack-dev-server --open"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

npm start 测试OK

上面已经开始了一个服务器,并且可以进行打包,打包完后,生成了bundle.js这个文件了,怎么去用?

不能在index.html直接去引入bundle.js这个文件了,因为通过webpack-dev-server,人家是把打包后的文件,生成到了内存中。

解决方案:把index.html也载入内存,在内存中index.html就可以引入bundle.js。

4. HtmlWebpackPlugin

ennn,这是个插件,它简化了HTML文件的创建,以便为你的webpack包提供服务

npm install --save-dev html-webpack-plugin
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js', //表示要打包的文件
    output: {},
    module: {},
+   plugins: [
+       new HtmlWebpackPlugin({
+               title: " Hello World",  
+               filename: "index.html",
+               template: ". / src / index.html"
+           }
+       )
+   ]
}

end


有错请指正,学习没有终点,谢谢

工具只有使用才能越来越熟练,加油٩(๑>◡<๑)۶

感谢阅读

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值