尚硅谷新版Webpack实战教程(从入门到精通)

饭勺33:
注意： 如果按照老师的做法没有成功的，那是用法改变了。你需要在webpack.config.js文件所在目录下创建一个同级的postcss.config.js文件然后写入一下内容 module.exports = { plugins: [ //使用postcss插件 require('postcss-preset-env') ] } 最后将webpack文件中的其他配置去掉，改用默认配置 'postcss-loader' 已解决

【回复】{ loader: 'postcss-loader', ident: 'postcss', options: { postcssOptions: { //或者将插件引入写在单独的配置js中 //config: './config/postcss.config.js', plugins: () => [ require('postcss-preset-env')() ] } } }
【回复】回复 @小z黑黑 : { test:/\.css$/, use:[ MiniCssExtractPlugin.loader, // 'style-loader', 'css-loader', { loader:'postcss-loader', options:{ postcssOptions:{ ident:'postcss', //打包后有兼容性样式代码 plugins:[ require('postcss-preset-env') ], //这样写就没有兼容性代码 plugins: () => [ // postcss的插件 require('postcss-preset-env')() ] } } } ] }
【回复】回复 @GuYun-D :{ loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('postcss-preset-env')() ] } } } 这样写，既没报错，兼容性代码也出来了
奥利奥花生:
课件地址... webpack从入门到精通 下载地址：https://pan.baidu.com/s/1JxvXF8EyG9TSNLqkc98YzQ 提取码：i5qc

【回复】谢谢楼主，没有的联系我 我私发给你们，不用解压的
【回复】回复 @bili_56045523702 :球球
不会飞_Pilot:
P13 关于老师讲到的修改postcss-loader的配置修改内容，应该是版本问题，我按照老师写的一直报错，上github查了查最新的写法，正常运行了，配置如下： { loader: 'postcss-loader', options: { postcssOptions: { plugins: [【'postcss-preset-env',{}】] } } }

【回复】实测 如果{}不需要继续传入options，可以直接这样plugins: 【'postcss-preset-env'】 效果同上
【回复】【】是英文的中括号，应该是识别错了
廖子默:
webpack5.11和webpack-cli4.3.1的同学直接用老师的命令打包会报错。应该使用webpack --entry ./src/index.js -o ./build --mode=development 或者直接使用npx webpack默认打包src下的index到dist文件夹下的main.js

【回复】指定输出文件名可以加个 --output-filename built.js
【回复】谢谢！终于找到可行的办法了
【回复】是的 在webpack 看到后尝试 建议使用npx
我已彻底疯狂6:
看片指南：大家在学这门课的时候一定要注意下载包的版本一定要和老师的版本一样，不然会报很多错的！[微笑]。大家推我上去，以免其他同学在版本上浪费时间！

彼岸月见草:
用webpack5.0的注意！！要去官网比对用法！不然找半天都不知道为啥错 像url-loader，file-loder都是废弃不会直接使用的。。我整了半天，虽然打包了图片，但是却打包了两次，并且无法显示图片了， 如果想要使用这些废弃的旧功能，加上type: 'javascript/auto'

【回复】{ test: /\.(png|gif|jpg|jpeg)/, use: [ { loader: "url-loader", options: { limit: 8 * 1024, name: '【name】.【hash:16】【ext】', outputPath: 'static/img' } } ], type: 'javascript/auto' }
【回复】在less文件里引入图片资源就可以了。不用再下其他loader
【回复】是的 终于出现明白人了 应使用webpack5的asset-module
Vacricticy:
开发环境配置小结： - less/css 文件的完整处理过程： - 1.通过less-loader编译为css - 2.通过post-css做css代码的兼容 - 3.通过css-loader将css代码编译到js文件中 - 4.通过style-loader将css代码插入在html标签中 - 4.或通过MiniCssExtractPlugin插件和MiniCssExtractPlugin.loader将css文件提取出来，以link标签的形式引入在index.html中 - 5.通过OptimizeCssAssetsWebpackPlugin插件进行代码的压缩 - js文件的完整处理过程 - 1.通过eslint-webpack-plugin插件进行代码格式的检验 - 2.通过babel进行兼容性处理 - 注意⚠️：eslint应在babel之前进行处理。如果babel先对js代码进行了转换，那可能在通过eslint检查的时候会报错。所以应该先通过eslint进行语法检查，然后再通过babel做语法兼容。 - 3.通过mode="production"对代码进行压缩 - 图片文件的完整处理过程： - 1.对于在css 中通过background-image引入的图片，需要使用url-loader进行处理 - 2.对于在html中直接引入的img，直接使用html-loader处理 - html文件的完整处理过程： - 通过HtmlWebpackPlugin插件实现： - 引入index.html模版 - 打包 - 代码压缩 - 其他文件的处理： - 使用file-loader进行处理

ourAnimals:
webpack-cli4v以上的本地服务器的启动命令为 webpack serve 否则报找不到 webpack-cli的错误

【回复】我前几天被这搞了好久 , 被迫降版本 , 感觉不是在学webpaack , 是在踩坑 ,我学的这几天踩了一堆坑 , 大多是版本问题[喜极而泣]
【回复】回复 @宣武区的天是晴朗的天 :是得，操它二大爷的版本
【回复】这是评论区给我解决的第二个版本带来的问题
Kedess:
看完18章了，一个阶段告一段落，做个笔记 老师安装的包所有的版本 webpack-cli@3.3.11 webpack@4.41.6 style-loader@1.1.3 css-loader@3.4.1 less-loader@5.0.0 html-webpack-plugin@3.2.0 url-loader@3.0.0 file-loader@5.0.2 html-loader@0.5.5 webpack-dev-server@3.10.3 mini-css-extract-plugin@0.9.0 postcss-loader@3.0.0 postcss-preset-env@6.7.0 optimize-css-assets-webpack-plugin@5.0.3 eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 babel-loader@8.0.6 @babel/preset-env@7.8.4 @babel/core@7.8.4 @babel/polyfill@7.8.3 core-js@3.6.4 其中@babel/preset-env@7.8.4 @babel/core@7.8.4 这两个包的版本会报错 Could not find plugin "proposal-class-static-block". 另装了版本@7.16.5无报错，但编译后并没有兼容箭头函数 其他包一切正常和老师讲的一样

把着小椅子哟:
p7.出现打包后图片多出一倍，是webpack的asset模块又进行打包了一次，可以添加type来关闭，第二处就是打开HTML文件后图片引用失败且后缀为【object%20Module】是因为webpack5默认开启esModule，手动设为false关闭就行 { test:/\.(jpg|png|gif)/, loader:'url-loader', options:{ esModule: false, // webpack5默认开启esModule 手动关闭 limit: 10*1024, }, type: 'javascript/auto' // 阻止webpack5中asset }

【回复】感谢大佬解决了我的问题[打call], 友情提示一下后面的兄弟 type: javascript/auto 要带引号
【回复】太感谢了，还得是评论区
-Apache:
P15 eslint-loader配置无效 使用 eslint-webpack-plugin 来替代eslint-loader 1、官网通知eslint-loader即将废弃：https://github.com/webpack-contrib/eslint-loader 2、如何使用 eslint-webpack-plugin（需要eslint7+）：https://github.com/webpack-contrib/eslint-webpack-plugin 3、如何配置eslint-webpack-plugin：https://eslint.org/docs/developer-guide/nodejs-api#%E2%97%86-new-eslint-options

【回复】回复 @王冰冰yo :怎么配置的呀，我的也不对
丶小澎湃丶:
P26 如果开启了 eslint 再进行懒加载会报错 无法再非顶层使用import 解决： 1、新建 .eslintrc 文件 2、配置 { "parser": "babel-eslint", "parserOptions": { "sourceType": "module", "allowImportExportEverywhere": true } } 3、找了一会,百度真的什么妖魔鬼怪都有,希望能帮上需要的人

【回复】这种问题别去百度，尽量去google，百度出来前几个都是简书、CSDN复制粘贴的玩意
MARIOyiwen:
第 16节的 报错处理 options: { presets: [ [ '@babel/preset-env', { useBuiltIns: 'entry', corejs: { version: 3 }, targets: { chrome: '60', firefox: "60", ie: '9', safari: '10', edge: '17' } } ] ], //利用 @babel/plugin-transform-runtime 插件还能以沙箱垫片的方式防止污染全局， 并抽离公共的 helper function , 以节省代码的冗余 "plugins": ["@babel/plugin-transform-runtime"] }

【回复】报错是因为 babel 7 以上的版本 全境污染问题
【回复】第16节 我报了一个错 说找不到core-js/fn/promise 这个模块 ，去npmjs官网上看了一下发现文件位置改动了，我吐了，最后只能指定下载 core-js@2
【回复】回复 @MARIOyiwen :其实你这样配置 Promise 还是没有被转译,你在IE上可以看到
叫我鲁顺超吖:
我的版本信息 "webpack": "^5.19.0"；"webpack-cli": "^4.4.0"； "webpack-dev-server": "^3.11.2" 报错信息：`Error: Cannot find module 'webpack-cli/bin/config-yargs'` 这里了webpack-cli 与webpack-dev-server 版本不兼容的问题， 解决办法1.webpack-cli的版本降为3.3.12 解决办法2.`npx webpack serve` 使用这个命令运行

【回复】回复 @啦啦爱你一生 :我用的 办法2 。可以的呀！
【回复】我用了办法二，浏览器会自动打开了，但是。。还是没有自动打包，这是怎么回事[大哭]求大佬指点一下
_引力波:
P7: 打包图片问题，webpack5x版本已废弃 url-loader、file-loader等 解决： { test: /\.(jpe|png|gif)$/, type: 'asset/inline' //替代url-loader }, --------------------------------------------------------------------- 以下是官方解读 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。 在 webpack 5 之前，通常使用： raw-loader 将文件导入为字符串 url-loader 将文件作为 data URI 内联到 bundle 中 file-loader 将文件发送到输出目录 资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader： asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。 asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。 asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。 asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。 当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 'javascript/auto' 来解决。

归来曦:
笔记： webpack初识：https://juejin.cn/post/6986896605420978189 webpack开发环境配置：https://juejin.cn/post/6987267444230324261 webpack生产环境配置：https://juejin.cn/post/7002837689120604191/

【回复】自己回复一下，后边继续更新
【回复】回复 @归来曦 :非常实用
胖若西瓜:
p4: npm i webpack webpack-cli -g命令执行慢，可以用cnpm。 cnpm安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org。 cnpm报错：1.使用管理员身份运行vs code 2.运行命令set-ExecutionPolicy RemoteSigned

【回复】p4：报错：Unknown command './src/index.js' 【webpack-cli】 Unknown command './src/index.js' 【webpack-cli】 Run 'webpack --help' to see available commands and options 解决方法： 使用完整的命令 webpack --entry ./src/index.js --output-path ./build/bundle.js --mode=development