Webpack配置文件初步

我不是女神ヾ 2024-04-17 06:02 74阅读 0赞

在命令行中输入：

npx webpack 需要打包的文件名

这样便可以对文件进行打包，似乎并不需要所谓的配置文件。而实际上，并不是不需要配置文件，**而是因为Webpack自身有一个比较完善的默认配置**。

Webpack的默认配置文件名是`webpack.config.js`。

我们来看一个比较基础的配置写法：

const path = require('path');
    
    module.exports = {
        
        entry: '需要打包的文件路径',
        output: {
        
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    };

文件采用CommonJS的规范，导出一个对象，`entry`字段指定需要打包的入口文件，而`output`则是打包后文件的存放位置。

有了这个文件，就可以直接使用`npx webpack`来进行打包了。

在这里插入图片描述

使用过create-react-app等脚手架工具的人都知道，我们是可以通过类似`npm start`、`npm run dev`这些命令来启动应用的，那么Webpack能不能有类似的命令写法呢？当然有。

在目录下的`package.json`内新增一个`script`字段，这个字段对应一个对象，而这个对象内再设置一个`bundle`字段（这个可以自定义），字段值设为`webpack`。

那么之后我们只需要输入`npm run bundle`便可以进行打包了。

可能大家会有一个疑问，因为实际上`npm run bundle`就是`webpack`命令，那么这样岂不是会调用全局环境中的`webpack`？大可不必担心，写在`package.json`中，npm就会自动先从当前目录下的`node_module`内去寻找`webpack`。

现在还有一个问题，就是那个Warning该怎么去掉？仔细看Warning所写之内容，实际上是在提醒我们没有为打包设置环境。换句话说，Webpack需要知道是为生产环境还是开发环境打包，这两种环境下打出的包最大的不同就是生产环境下打的包经过了压缩，而开发环境则没有。

那么我们仅需为`webpack.config.js`所导出的对象再增加一个`mode`字段即可，至于值是`production`还是`development`就要看自己的需要了。

发表评论取消回复

表情：

评论列表（有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack配置文件初步

命令行中输入： npx webpack 需要打包的文件名这样便可以对文件进行打包，似乎并不需要所谓的配置文件。而实际上，并不是不需要配置文件，**而是因为W...

我不是女神ヾ/ 2024年04月17日 06:02/ 0 赞/ 75 阅读

相关 webpack生产环境配置文件

webpack生产环境配置文件 webpack.config.js const { resolve } = require('path'); const

妖狐艹你老母/ 2023年05月28日 09:59/ 0 赞/ 18 阅读

相关 webpack3.x文件配置

-------------------- webpack3.x 配置 webpack3.x 主配置`webpack.config.js`文件，每个模块的详细信息都有一定

「爱情、让人受尽委屈。」/ 2022年06月07日 10:41/ 0 赞/ 283 阅读

相关 webpack的配置文件

const path = require('path'); module.exports = { entry

左手的ㄟ右手/ 2022年06月05日 11:55/ 0 赞/ 233 阅读

相关 nginx配置文件简谈------初步认识nginx的配置文件

最近，在初步解除nginx的时候，刚看到配置文件的时候，自己处于一脸懵的状态，然后就各种查找才明白了nginx配置文件的一些意思，我发现自己不明白nginx的配置文件是因为

刺骨的言语ヽ痛彻心扉/ 2022年05月10日 06:34/ 0 赞/ 238 阅读

相关 webpack学习（一）：初步配置webpack

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

女爷i/ 2022年04月06日 05:27/ 0 赞/ 308 阅读

相关 webpack--webpack.config.js配置文件(二)

目录结构 ![clipboard.png][] webpack.config.js const path = require('path'); m

r囧r小猫/ 2022年03月01日 03:10/ 0 赞/ 301 阅读

相关 webpack_（第二章）_使用webpack的配置文件

webpack的配置文件 webpack是一个模块打包工具，帮助我们把模块都打包到一起，当引入图片模块和JS模块，引入的流程和打包的方式肯定是不同的。加入引用的是JS文件，

妖狐艹你老母/ 2022年01月09日 16:21/ 0 赞/ 287 阅读

相关 vue Webpack 中sass配置文件

vue学习日记：在项目中引用sass vue-cli生成的项目引入sass方法: 安装注意事项 sass-loader 版本不能高于 7.3.1 npm i

谁践踏了优雅/ 2021年12月16日 09:25/ 0 赞/ 451 阅读

相关 webpack3 webpack.config.js配置入、出口文件

__dirname node.js中的当前目录即等同于.,两个下划线 webpack.config.js配置(命令行执行webpack后,根据配置内容

傷城~/ 2021年07月24日 19:50/ 0 赞/ 452 阅读