八股
常见plugin
前端工程化：webpack
教程
背景
- 多js文件的引入，如何解决作用域问题： 立即执行函数变量作用域是函数作用域，将需要的变量return出来即可
（js文件都挂在全局变量window上，导致window臃肿 ）
- 如何解决代码拆分问题： es6模块化支持浏览器运行；node中的commonjs方法，但是浏览器不支持运行它；
（只需要loadsh的一个方法确将所有loadsh方法引入）
vite适合vue3打包
安装配置webpack
-
装
node的同时自动安装npm（node package manager） -
webpack-cli使得webpack命令能在命令行中执行 -
推荐本地工作目录中安装webpack：打开项目文件夹
npm install webpack webpack-cli --save-dev从而生成src/node_modules与package-lock.json -
安装npm的包管理的配置文件src/package.json：
npm init y -
卸载全局webpack：
npm uninstall webpack webpack-cli --global -
查看版本：
webpack -v
运行webpack
- 打包：
npx webpack（使用项目内安装的webpack） - 打包：webpack（使用的全局安装的webpack）
- 查看详细打包信息：webpack --stats detailed
自定义webpack配置
在项目文件根目录下新建webpack.config.js配置文件
// webpack.config.js
const path=require('path')
module.exports = {
entry: './assets/js/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')//__dirname代表获取webpack.config.js所在的绝对路径；也就是创建了与webpack.config.js并列位置的那么一个dist文件夹
},
module: {
rules: [
]
},
plugins: [
],
mode: 'development'
}
保存后，运行命令npx webpack即可按照配置文件打包
@配置
build文件夹下，默认src文件夹？一个项目没有webpack怎么应用呢
！vue2/3可以使用vue.config.js配置
plugin：webpack编译生成css、js等等，plugin是打包优化、资源管理的工具帮助 比如自动引入webpack打包好的资源
