webpack5零基础入门-2wepack配置项的了解

在使用webpack之前,我们需要对webpack的配置项有一定的认识。

1.五大核心概念

1.entry(入口)

指示webpack从哪个文件开始打包

2.output (输出)

指示webpack打包完的文件输出到哪里,如何命令等

3.loader(加载器)

webpack本身只能处理js、JSON等资源,其他资源需要接触loader,webpack才能解析

4.plugins(插件)

扩展webpack的功能

5.mode(模式)

主要有两种模式:

开发模式:development

生产模式:production

2.准备webpack配置文件

在项目根目录下新建webpack.config.js文件

const path = require('path');//nodejs用来处理路径问题的模块

module.exports = {
    /**入口 */
    entry: './src/main.js',
    /**输出 相对路径*/
    output: {
        /**文件输出路径 绝对路径*/
        //__dirname 表示当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'),
        /**文件名 */
        filename: 'dist.js'
    },
    /**加载器 */
    module: {
        rules: [
            //loader的配置
        ]
    },
    /**插件 */
    plugins: [
        //plugin配置
    ],
    /**模式 */
    mode: 'development'
}

配置完成之后运行 npx webpack 进行打包

运行这个命令后会在根目录下寻找webpack.config.js进行配置项的读取,然后进行打包

结果:

可以看见打包后生产的文件夹变成了dist,文件名也变成了dist.js。证明配置生效了

相关推荐
Rattenking1 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Beamon__6 分钟前
element-plus按需引入报错AutoImport is not a function
webpack·element-plus
CodeToGym8 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫9 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫13 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc3 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter