webpack概念以及使用

一、webpack介绍

1.概念：webpack是前端项目工程化的具体解决方案

2.功能：提供友好的前端模块化开发的支持，以及代码压缩混淆、处理浏览器JavaScript的兼容性，性能优化等强大功能

3.好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性

二、webpack使用

1.安装：在要运行的根目录下打开终端，然后输入以下命令：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

2.项目中配置：主要分为三步

①在项目根目录中创建名为：webpack.config.js的webpack配置文件，并初始化如下的基本配置：

module.exports = {
    mode: "development" 
}
//mode中有两个可选值，一个为development在进行前端开发时使用,另一个为production在开发完成后，上线时使用

②在package.json的scripts节点下，新增dev脚本，其内容如下：

"scripts" :{
    "dev" : "webpack"
}

③在cmd终端中运行:

npm run dev

dev是你第二步自己命名的参数，

当这三步完成后，就可以将项目进行打包创建

三、webpack中一些常识

1.在webpack 4.x和5.x的版本中，会有一个默认约定

        默认的打包入口：src->index.js文件

        默认的打包输出路径：dist->main.js，dist是通过npm run dev后自动打包生成的

2.也可以通过在上面创建的webpack.config.js中修改默认约定

//首先导入path
const path = require('path')
//接着通过两个属性entry和output修改
module.exports = {
    mode : "development"
    entry: path.jion(__dirname,'./src/index.js'), //打包入口文件的路径
    output: {
        path:path.jion(__dirname,'/dist'), //输出文件的存放路径
        filename: 'bundle.js' // 输出文件的名称，默认为main.js
}

}