webpack 基础配置 （入门）
webpak基础配置（入门）
写这个的初衷就是完善自己，对于最近学到的webpack基础配置有个美好的总结，所以会从最开始的 【npm init -y】开始的 主要的话还是介绍了entry output loader plugin 开始展开的一系列操作，希望能帮助到觉着webpack很神秘，但又不知道是啥的小伙伴一个美好的前缀！
👉👉👉这里最好别看，直接跟着我的思路一起走
一、初始化
> 首先npm init -y 初始化
> npm i webpack webpack-cli -D ---> 然后文件安装局部webpack
- 然后基本上这里有了这个显示就说明初始化完成了
二、创建文件
创建src文件夹 src
|---- js
|---- index.js ---> 这样的层级目录
index.html
三、创建命令调用webpack
1.再js文件夹下创建一个sum.js文件写个函数方法并导出
2.再js文件下创建squre.js文件写个函数并导出
3.再index.js文件里引用并调用方法
这时候终端输入webpack 执行，显示打包成功输出一个dist文件夹，里面会有个main.js，引用里面的main.js文件，并打开f12你就会发现控制台会打印得倒方法的结果
这里我们分别用了es6导入 和 command js俩种导入方法，然后执行webpack它成功执行，所以这里webpack的一个作用体现了出来，能够统一模块化。
四、entry、output
1. 打开package.json创建命令 ---> 就可以使用npm run build去执行webpack
2. 创建webpack输出的配置文件 webpack.config.js
3. 再入口中配置输入和输出俩个口子
4. 这时候执行 npm run build ----> 先删除dist包
这时候就看到之前我们配置的输入输出的地方
因为我们改了输出的文件名字，所以我们index.html的文件引入方向还得改一下
然后就已经完成了文件打包的输入和输出了！
webpack.config.js这个文件只是webpack默认识别的文件，
我们也可以改名字，再之前配置的命令行后面加上 --config 自己想要的文件名字.js
设置完了之后并且把之前创建的默认webpack.config.js改成自己名字的格式
并且删除dist文件夹跑一下 npm run build
然后打开index.html 打开网页打印还是正常输出，说明就成功了
五、loader
1. 什么是loader呢？
webpack是一个只能识别.js和json的，所以它需要loader来转换文件，让webpack能识别，不会报错，来支持文件的转换。
2. css-loader
在js文件夹创建test.js文件，并创建元素，写入class类名字title
再index.js文件引入test.js,并执行npm run build命令，打开index.html,我们就会看见之前写的Hello World,在页面中展示,然后打开f12发现，上面室友title这个类名的
然后创建css文件夹，并创建test.css,并写入之前的title样式,并导入test.js文件
运行 npm run build,你会发现它报错了，然后拉上去看这个错误发现我们缺少了某个loader
所以安装 npm i css-loader -D
然后再运行npm run build ,成功运行，但是打开页面发现之前写的颜色没有变，因为css-loader可以把css样式变成webpack可识别的文件，但是不会插入到页面中，所以这里引出了另一个laoder，style-loader，它可以把写的样式插入到head中，内联
3. style-loader
安装 npm i style-loader -D
然后运行npm run build，打开index.html就会发现，样式执行了，然后打开f12会发现，样式是展示在head中的，所以tyle-laoder的作用就是把css-laoder识别成webpack可识别的文件后，插入到页面的head中,内联
4. less-loader
安装 npm i less less-laoder -D
创建less文件在里面写title的样式，然后再test.js文件里引入
再之前的webpack改的名字的配置中，配置以less文件结尾的loader
然后运行命令npm run build 打开页面你就会发现之前less文件的样式生效了
5. postcss-loader、browserslist
再命令终端运行 npx browserslist
你就会看到webpack去浏览器拿到返回的默认符合版本的浏览器兼容
下面是配置在package.json里，不过一般都是创建一个.browserslistrc文件单独维护，好扩展，这样就有了.browserslistrc文件的由来，你可以改改里面的1%,可以改成0.01%，大于市场百分之0.01的浏览器，然后再运行npx browserslist，下面就会出现你设置的对应版本
所以postcss-laoder只是一个引子，只是找到了根据当前设置的版本号兼容返回的东西来找到需要兼容加浏览器前缀的东西，如果需要再代码前面有效果的话还得配置插件autoprefixer,不过这里我们用了一个预设，这里集成了autoprefixer插件，post-preset-env，并且单独维护一个文件postcss.config.js这个文件用来集成css一些公用的插件
npm i postcss-loader postcss-preset-env -D
为什么要放在css-loader之前呢，是因为它只在css的样式前面加浏览器前缀，如果是less的话只能用less先翻译成css才能识别
6. file-loader
这个loader的作用就是把图片塞到分别塞到打包好的那个文件里
npm i file-loader -D
再js文件夹下创建images.js并写上图片,然后引入index.js中，然后执行npm run build
这里file-loader就配置好了，这里说下小问题因为图片后面加default的问题，所以如果不加default的话，可以在配置上直接加esModule:false,就可以了,然后继续运行npm run build，打开页面还是可以看到图片的效果
7.url-loader
跟file-laoder差不多，只是url-loader把图片转成了base64直接插进了代码中，你打开之前用file-laoder打包的dist文件夹，你就能看见一个图片的文件，url-laoder打包之后是没有这图片文件的
安装 npm i url-loader -D
然后先删除dist包，再执行 npm run build 再打开dist目录包看看，你会发现没有之前图片的文件格式就只有一个核心js文件，然后你再打开index.html 发现网页还是有图片显示的，这就说名url-loader是base64直接打包进的js，这有利有坏吧，可以减少服务器请求，但是会让包过于大，
所以这里其实url-loader里面是集成了file-loader的，只要给它加个限制limit
六、plugin
loader只是用来转换文件，让本来只对js、json支持的webpack进行更多的支持，但是插件就不一样了， 在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出果
1.loader 和 plugin 的区别
1. loader，是一个转换器
将A文件进行编译形成B文件，这里操作的是文件，比如将 A.scss 转换为 A.css，是单纯的文件转换过程。
2. plugin 是插件扩展器
针对webpack打包的过程，它不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些事件钩子，执行任务。plugin 比loader 强大，通过plugin 可以访问 compliler和compilation过程，通过钩子拦截 webpack 的执行。
2. cleanWebpackPlugin
主要就干了一件事情，就是你npm run build的时候清空一遍你打包出来的dist文件包
npm i clean-webpack-plugin -D
然后再dist文件夹里随便创建个文件，然后npm run build运行看看会不会清空这个文件
3. htmlWebpackPlugin
复制模版index.html
npm i html-webpack-plugin -D
然后运行npm run build 此时dist目录里就有你在外面那个模版的html
4. copyWebpackPlugin
听到名字就知道，这肯定就是复制某个文件去dist里啦，这里的制定场景是，有时候有些icon是没必要转换的，原封不动拿去用就好了
npm i copy-webpack-plugin -D
根目录下创建public文件夹里面写个xxw.js，然后运行npm run build，再去看dist文件包，发现xxw.js被复制到了dist包里
基本的配置已经写完了，如果有人觉着我哪里写的不够细或者哪里错了，欢迎私聊我评论，哈哈哈，我们一起学习，就得一起卷！如果对有帮助的话请留下你的一个赞吧！ 倩倩叮
转载自:https://juejin.cn/post/7049364599623122980