webpack（二）webpack介绍与基础配置

本文链接：https://blog.csdn.net/cwjxyp/article/details/132602143

Webpack是一种用于前端项目的模块打包工具，能管理、优化资源，支持代码转化、分割、懒加载等功能。文章介绍了Webpack的基础配置，如入口和出口文件设置，以及如何通过package.json指定配置文件。

摘要由CSDN通过智能技术生成

什么是webpack

webpack最初的目标是实现前端项目模块化，旨在更高效的管理和维护项目中的每一个资源。
可以看做是模块打包机，分析你的项目结构，找到javascript模块以及其它一些浏览器不能直接运行的拓展语言（Scss、TypeScript等），并将其打包为合适的格式以供浏览器使用。

可以做什么

代码转化：es6转为es5，scss、less转为css
文件优化：压缩代码体积
代码分割：路由懒加载
模块合并
自动刷新：热更新
代码校验
自动发布

2.基础配置文件

入口文件
默认是src/index.js,如果我们想要修改入口文件，可以在打包时使用命名npx webpack --entry ./src/main.js来进行打包
出口文件
默认是项目下的dist目录，如果想要修改npx webpack --output-path ./build

可以使用webpack配置文件进行配置（入口文件可以采用相对路径，出口文件只能采用绝对路径）

// webpack.config.js 
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "build.js",
        // path: './dist'  //The provided value "./dist" is not an absolute path! 必须是绝对路径
        path: path.resolve(__dirname, 'dist') //path.resolve(__dirname)__dirname， 在所有情况下，该变量都表示当前运行的js文件所在的目录，它是一个绝对路径，在此路径下新建一个dist目录，存放打包文件
    }
}

指定webpack配置文件

// package.json
"build":"webpack --config test.webpack.json"