webpack5教程一:初识webpack

·  阅读 1110
webpack5教程一:初识webpack

「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」。

Webpack是什么,解决了什么问题?

Webpack是目前最热门的前端工程化模块打包工具,它设计的初衷是解决前端模块化问题,让我们实现如何高效的地管理和维护项目中的每一个资源,目前最新版本Webpack5,功能也变得越来越强大,但它依旧不忘初心,始终没有改变它是一个前端打包工具的初衷,它所做的事情就是:分析项目结构,找到并加载所依赖的资源模块,把一些不被浏览器支持的特性(如Sass,TypeScript,ES6+、JSX等)转换和打包成浏览器兼容的格式来使用。

这也是Webpack最强大之处,接下来我们将从零开始学习这个工作中必备技能 —— Webpack!

Webpack中文官网:webpack.docschina.org/

安装Webpack

如果你使用 webpack 4+ 版本,除了webpack,你还需要安装 webpack-cli,目的是在命令行中使用webpack

    npm install webpack webpack-cli
复制代码

使用Webpack

1、零配置运行Webpack

安装完成后就可以直接使用webpack了,webpack4+后的版本支持零配置打包,不需要进行其它额外操作,在命令行输入以下命令即可

    npx webpack
复制代码

必须保证前你的npm版本在5.2+,npm v5.2.0引入一个npm包执行器npx,执行npx命令时它会调用node_modules.bin目录下的相应命令

零配置使用webpack.png

以上命令webpack会默认把src/index.js文件作为入口开始编译,并打包到main.js文件,最后输出到当前目录下的dist文件夹,这都是webpack零配置下的默认行为。

如果在index.js文件中引入其它js模块,webpack会继续加载这些模块,并将这些零散的js文件打包到一个main.js文件中,如下图:

加载并打包js文件.png

很多时候这种默认的配置并不能满足我们的开发需求,比如:

  • 入口文件不是index.js而是其它文件
  • 修改输出目录
  • 输出后的文件也不想叫main.js想换个其它文件名
  • ...

对于这些需求,我们都可以使用命令行参数来实现,从而覆盖这些默认设置

2、webpack-cli命令行参数

webpack-cli的参数有很多,可通过npx webpack --help查看

image.png

  • 如通过--entry设置入口位置,打包时webpack就会从该位置开始查找和分析模块依赖

        npx webpack --entry ./src/main.js
    复制代码
  • 如通过--output-path设置打包后输出文件位置

        npx webpack --entry ./src/main.js --output-path ./public/
    复制代码
  • 如通过--mode指定输出环境代码,有productiondevelopmentnone(请自行查阅每种环境下代码的含义与作用)

        npx webpack --entry ./src/main.js --output-path ./public/ --mode production
    复制代码

相信你也看到了,命令行参数太过于繁琐,每次都要输入,且不能保存,实际开发中很少通过这样的方式进行配置,那有没有更好的方式来实现自定义配置呢?答案就是webpack配置文件

3、webpack配置文件

要实现个性化配置,只需要在项目根目录下创建webpack.config.js文件,该文件在NodeJS环境下被执行,是一个遵循commonJS规范的文件,接下来通过配置文件来实现上面的需求:

  • 通过entry配置设置入口位置,指示webpack从哪里开始分析项目
  • 通过output配置打包后文件输出位置,指示 webpack 如何去输出、以及在哪里输出内容,如:
    • output.path设置输出打包后文件保存位置,该属性必须为绝对路径(一般用path.join()方法设置绝对路径)
    • 如果还想修改打包后的js文件名,通过output.filename设置
  • 通过mode属性设置输出特定环境代码
    module.exports = {
        entry:'./src/main.js',
        output:{
            path:path.join(__dirname,'./public'),
            filename:'bundle.js'
        },
        mode:'production'
    }
复制代码

然后在命令行运行以下命令进行打包

    npx webpack
复制代码

webpack会自动查找当前目录下的webpack.config.js文件中的配置并打包,代码打包后,会输出到 ./public/bundle.js

你也可以通过output.filename的变量名实现特殊的需求,如([name][hash]等),其中name为入口文件名称,hash为哈希字符(默认生成10位哈希字符,可能过[hash:5]指定生成哈希字符长度),一般用于解决缓存问题

     module.exports = {
        entry:'./src/main.js',
        output:{
            path:path.join(__dirname,'./public'),
            filename:'js/bundle-[name]-[hash:5].js'
        },
        mode:'production'
    }
复制代码

以上配置运行后,会打包成bundle.main.3eef7.js文件,并输出到public/js文件夹

image.png

4、自定义Webpack配置文件

当然,webpack的配置文件是可以自定义的,可以是其它名字或是其它目录(如:./config/webpack.js),运行命令时通过 --config 指定配置文件位置即可,如:

    npx webpack --config ./config/webpack.js
复制代码

后语

到目前为止,我们的代码只是使用Webpack加载与打包js模块,对于其它类型的模块(如css、typescript、图片等),就得使用asset module资源模块loader加载器实现加载与编译了,该内容我会在下一篇文章《webpack5教程二:资源模块与加载器》中详细说明,敬请继续关注。

往期文章传送门

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改