webpack打包工具入门 (一)

最新推荐文章于 2023-05-19 17:12:00 发布

黑桃爱上红心

最新推荐文章于 2023-05-19 17:12:00 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： webpack 前端打包工具

本文链接：https://blog.youkuaiyun.com/qq_42669760/article/details/100519904

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了webpack的基本概念和使用步骤，包括entry（入口文件）、output（输出文件）、loader（处理非js、json文件）和plugins（处理插件）。通过全局安装webpack和webpack-cli，创建项目并配置文件，实现简单的前端资源打包。文章还提到了一些常见问题和解决方案，例如js文件采用umd标准。

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

前言：
webpack是前端人员常用到的打包工具，包括vuecli搭建自带webpack。所以面试一家公司，基本都会问到关于webpack的面试题，学习webpack是必经之路。

什么是webpack？为什么要使用它？

webpack可以理解为，将程序员编写的源代码，经过压缩、编译、语法检查…等一系列操作，编译成浏览器可以识别的代码，优化性能。webpack是个前端打包器，前端所有的资源都可以当作模块（js、css、img、json…）

有些时候我们编写的模块化、typescript、less等，这些东西加快了我们的开发速度，但浏览器并不是完全支持这些语言，这就是为webpack类工具提供了需求！

webpack四大核心概念

entry（入口文件，要编译的js文件，可多个）
output（输出文件）
loader（让webpack可以处理非js、json文件，如：less、img）
plugins（插件，处理loader处理不了的，比如：清空输出文件）

简单使用

全局安装webpack

npm install -g webpack
npm install -g webpack-cl

webpack是在node环境下运行的，这里的npm也是node的，所以需要提前安装node。
webpack在4.0版本之后，需要安装webpack-cli，这里都需要提前全局安装。（-g是全局安装的意思）

项目安装webpack

npm init
npm install -d webpack webpack-cli

新建一个文件夹，敲第一行命令，生成项目配置文件。
第二行命令是同时安装webpack以及webpack-cli，中间要用空格隔开，这个时候项目应该有两个json文件，一个node_modules文件夹。

编写webpack配置文件

在项目中，生成src文件夹以及webpack.config.js文件。
src放入一个要编译的js文件，以及要引入js文件的html。
打开webpack.config.js：

//引入地址，生成文件使用
const path = require('path');

module.exports = {
  // entry：要编译文件的地址，地址根据项目更改
  entry: './src/index.js',
  //output：要输出文件的配置
  output: {
    //输出文件的地址，这里是配置文件同级目录下的out文件夹（没有会自动生成）
    path: path.resolve(__dirname, './out'),
    //输出文件的名称
    filename: 'index.min.js',
  },
  //模式"production" | "development" | "none"，none和不写都是默认production
  mode: 'development',  //production是生产模式，development是开发模式
}

执行webpack

 webpack
 webpack config webpack.config.js

输入webpack，会自己寻找webpack.config.js去执行，第二行只是演示了全部输入的方法，比较麻烦

引入输出文件

打开事先准备好的html，引入输出的js，简单的webpack操作就结束了！

webpack坑
我个人使用webpack是为了打包自己编写的js原生插件，用面向对象的方法。webpack打包成功后，在项目调用插件的方法，报错“is not defined ”，他找不到！最后发现是因为webpack打包成一个立即函数，并没有导出一个变量。?可把我难受的….

解决方案

js文件采用umd标准

;(function(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['myPluginName'] = factory();
  else
    root['myPluginName'] = factory();
}(typeof self !== 'undefined' ? self : this, function() {

  class myPluginName{

  }
  return myPluginName;
}

webpack.config.js

const path = require('path');
const libraryName = 'myPluginName';

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './out'),
    filename: 'index.min.js',
    library: 'myPluginName',
    libraryTarget: 'umd'
  },
  mode: 'development',
}

这样就完美解决问题了?

本章就到此结束了,如有建议或者想法,请在下方评论,欢迎同行一起交流学习!(等待我下次更新)

原文地址:http://www.wsktop.com/?p=49(我的博客)