webpack4系列教程，如何搭建基本环境？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

网站文档

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

• https://www.webpackjs.com/concepts/output/

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

项目初始化

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

npm init -y

请注意：执行后续命令的时候，应该是个npm的项目文件夹，也就是说有package.json文件。否则安装失败，并且没有任何错误提示信息。

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

npm install webpack webpack-cli -D

或者

npm install webpack webpack-cli --save-dev

配置文件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只有一个，对于react和vue来说，这么操作，是没有啥大问题的，他们彼此之间的思路是一致的。

但是，对于传统的网页来说，是有着多个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目录下面。

不同的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命令没有找到

对于webpack命令没有找到的问题，因为是--save-dev的，局部安装，并不是全局安装webpack-cli。所以，在命令行里面，即使是在对应目录的根目录，依然是无法识别到webpack命令的。

那么，解决方案可以是：
方案一：把webpack命令定义到package.json里面的scripts里面。然后npm run。

方案二：使用npx直接执行webpack，也是可以识别到项目目录下面安装的webpack的。

相关链接

• 《如何利用webpack构建pdfjs加载pdf文件》 https://newsn.net/say/pdfjs-demo-webpack.html
• 《webpack、babel与react的那些事之一》https://newsn.net/say/webpack-babel-react-1.html
• 《webpack、babel与react的那些事之二》https://newsn.net/say/webpack-babel-react-2.html

总结

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

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。