Xiaoyc7的博客

三、模块1.概念一个大的程序往往由多个离散的模块构成，像js、css、less、vue、图片、音频、字体这些不同类型的文件，都可以统一都处理为模块存在，从而webpack可以处理各种类型模块之间的依赖关系，并打包。对于不同类型的模块的处理规则统一在module字段配置即可2.LoaderLoader可以对不同类型文件进行预编译,统一转化成模块，即 “万物皆模块”的前端工程化思想，从而可以根据ESModule或者CommonJS模块化规范引入任何类型的文件#mermaid-svg-dlInopRW

三、入口与出口1.概念入口即为webpack打包时的起始点，定义entry字段即可，出口即webpack打包后的输出文件，配置output字段即可2.配置webpack.config.js （所有的webpack配置均在webpack.config.js文件定义）module.exports={ entry:'./src/index.js', // 这里定义打包入口文件为 src/index.js output:{ // path:'./dist', // 打包输出路径，不推荐这

webpack简介1.webpack是什么？webpack是前端项目打包工具，在nodejs环境中运行，通过配置webpack.config.js文件结合命令行实现前端项目的自动化打包构建工作2.webpack简单工作原理webpack在处理打包时，会根据webpack.config.js文件中定义entry字段找到入口文件（我更喜欢称作为打包起点的文件），从这个入口文件开始，自动根据各个文件中的类似import xx from 'xx'、let xx = require('xx')、@impor

前期准备webpack是在nodejs环境中运行的，这里前提是你已经安装好了nodejs环境(最新版本即可，无需纠结要安装什么版本)1.项目初始化创建项目根目录,这里假设创建的目录为One,在根目录下启动命令行输入以下命令npm init -y这时会在根目录下生成一个package.json文件ONE/package.json定义打包脚本// 定义webpack脚本命令"scripts":{ "build":"webpack"}在根目录下执行以下命令2.安装相关依赖npm