webpack大行其道的年代,学会webpack的基本配置,也是作为一名前端程序猿的必备技能了。无论是你写react或者vue,也都是逃不脱webpack影子的。在苏南大叔看来,webpack的配置使用,说实话挺复制的。

苏南大叔:webpack4系列教程,如何搭建基本环境? - webpack-start
webpack4系列教程,如何搭建基本环境?(图2-1)

虽然webpack@4.0,现在号称可以做到零配置。但是,零配置只是一个挺美好的愿望。因为日常使用中,会涉及到大量的插件,会涉及到这些大量插件的配置问题。本文测试环境:webpack@4.43.0。注意:本文说的是webpack@4,而不是webpack@3,两者是有比较大的区别的。本文测试环境:macnode@14.2.0npm@6.14.4webpack@4.43.0

网站文档

webpack的文档,看起来很丰富。但是和其余的大量官方api一样,看起来很全,但是没有啥可用的。所以,这个文档,苏南大叔的建议,就是看看罢了。别当教程,因为对于新手来说,看完了基本上和没看是一样的感觉。

webpack的可以处理js文件,然后通过loader或者plugins处理:cssimg,甚至html这些传统的页面元素。webpack的终极奥义可能是:把所有的网页元素,都打包到一个.js文件里面。但是,在现实中的应用中,却不是这样的。大家通过各种眼花缭乱的插件,来处理加工传统的网页元素,最终呈现给用户,一个打包混淆过的js文件,以及htmlcssimg等元素。

当然,您可能需要使用npm进行项目初始化,注意的事项就是,项目名称(文件夹名字)不能叫做webpack。这个不做赘述。大家都知道,或者碰到报错了,再回来看看这句话。

npm init -y

官方提供的必备npm包,请安装webpackwebpack-cli。不过这样安装之后,就基本上是只具有打包.js的基本功能。其它的更多神奇功能都是在其它包的协助之下完成的。这将会在苏南大叔的后续文章中,给大家做相关介绍。

npm install webpack webpack-cli -D

配置文件webpack.config.js

webpack@4.0系列官方宣布,是可以做到零配置的,也就是说可以没有webpack.config.js文件的存在。但是,这个零配置是非常可怜的,能提供的功能非常非常有限。默认情况下:

  • 仅有一个入口entry,文件默认为src/main.js
  • 仅支持.js类型的打包,打包后,ouput文件存在dist/文件下。

上面的默认情况,其实相当于有个webpack.config.js配置文件,然后,配置内容如下:

const path = require("path");
module.exports = {
    entry: path.join(__dirname,'./src/main.js'), 
    output:{// 输出文件相关配置
        path: path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
}

在苏南大叔看来,这个webpack@4系列零配置的噱头,有点水的感觉。绝大多数情况下,还是需要修改这个webpack.config.js配置的。

这里需要特别提示说明的是:这个webpack.config.js配置文件,并不是那只类似json的配置文件,它是个nodejs文件,里面可以写node语句。

多入口文件entry

webpack中,最基本的概念就是入口entry。默认情况下,这个entry只有一个,对于reactvue来说,这么操作,是没有啥大问题的,他们彼此之间的思路是一致的。

但是,对于传统的网页来说,是有着多个html文件的,也往往是有多个.js脚本的。对于webpack.config.js配置文件来说,那也是需要有多个entry的。这里是如何处理的呢?

其实就是修改webpack.config.js文件的内容:

const path = require("path");
module.exports = {
    mode: 'production', // 环境
    entry: {
        app: './src/index.js',
        main: './src/main.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
}

在上述配置中,src目录里面的两个.js文件,经过webpack处理之后,会生成结果到dist目录下面。

苏南大叔:webpack4系列教程,如何搭建基本环境? - webpack-config-entry
webpack4系列教程,如何搭建基本环境?(图2-2)

不同的webpack.config.js配置文件

可以根据不同的需求,配置多个webpack的配置文件,不局限于一个webpack.config.js文件,可以增加很多其它类似的文件,比如:webpack.config.prod.js,文件名可以任意命令。如果想新的webpack.config.js文件生效,那么可以在命令行里面使用参数--config来进行指定。

例如:

webpack --config webpack.config.simple.js

上述命令可以放在package.json文件里面,也可以在项目根目录下面用npx执行。这个就是看大家的自身喜好来执行了。

相关链接

总结

在本文中,苏南大叔主要描述是webpack@4.0的起步使用。不过,仅仅是入门概念罢了。在实际的生产环境中,这还是远远不够的。更多webpack的经验文字,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: