webpack配置笔记总结

最新推荐文章于 2021-08-11 23:06:49 发布

平凡的路人

最新推荐文章于 2021-08-11 23:06:49 发布

阅读量784

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/TOT_ZZG/article/details/107038860

版权

本文是关于webpack配置的详细笔记，涵盖了安装、处理CSS与预处理器（如SASS、LESS）、JavaScript打包、文件管理和配置解析等方面。在CSS打包中，介绍了CSS与SASS、LESS的安装与使用，并提到了可能遇到的错误及其解决方案。在脚本处理部分，讲解了如何打包JS，使用Babel处理ES7语法，并讨论了可能出现的问题。同时，还涉及文件处理、resolve配置别名、插件使用及模板等内容，是webpack配置的全面总结。

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

前言：前端内容更新迭代太快，一个人记住这些东西很困难，所以记笔记就是一个很好方法。
记一篇自己能看懂的笔记；
记一篇有思维索引的笔记。

webpack处理

安装

安装：cnpm i webpack@3.8.1 -g
安装：cnpm i webpack@3.8.1 -D
注意：4版本问题较多，建议使用3版本

可能的报错

报错 ： TypeError: Cannot read property 'presetToOptions' of undefined
原因 ： 我把webpack的版本进行了转换3.8.1 <--> 4，打包报错。
解决 ： 1 根据提示，把const statsPresetToOptions = require("webpack").Stats.presetToOptions;中间Stats下标的这个.删掉。保存后再次运行webpack就成功了！
			 2 降版本到3.8.1；

报错 ： mode没有配置，4版本需要配置mode；

注意

module里面的属性rules、loaders。4版本要使用rules

ps： 大部分报错，如果找不到问题，就降版本。

style处理

打包css

安装、使用

cnpm i style-loader css-loader -D
使用 require("style-loader!css-loader![接文件路径名]")

打包sass、less

安装、使用

cnpm i style-loader css-loader sass-loader node-sass  -D
使用 require("style-loadler!css-loader!sass-loader![接文件路径名]")

cnpm i style-loader css-loader  less-loader less  -D
使用 require("style-loadler!css-loader!lass-loader![接文件路径名]")

style-loader
把样式代码转换成js字符串的样式代码

css-loader
转换成commonJS模块规范

postcss-loader
处理转义css代码

可能的报错处理

sass-loader 8版本可能报错，建议降低到7版本；
lass-loader 6版本可能报错，建议降低到4版本；

脚本处理

打包js等

安装、使用

cnpm i babel-loader babel-core babel-preset-env -D

//配置.babelrc
{
   
  "presets": [
    "env"
  ]
}

cnpm i babel-preset-stage-0 -D
处理es7语法

{
   
  "presets": [
    "env",
    "react",
    "stage-0"
  ]
}

可能的报错处理

babel-loader和babel-core版本只能相差1个版本；

文件处理

打包文件

安装使用

cnpm i url-loader file-loader -D

test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf)/
// woff|woff2|eot|ttf 处理iconfont字体

resolve

使用

1 配置别名
alias：{ }

插件

工具

cnpm i source-map -D
在浏览器上得到打包之前的文件
使用：webpack --devtool source-map

cnpm i webpack-dev-server@2.9.3 -g
cnpm i webpack-dev-server@2.9.3 -D
起服务的插件
使用： webpack-dev-server --inline --hot
报错： webpack4版本暂不支持
			热更新报错，需要使用 webpack.HotModuleReplacementPlugin 插件

cnpm i html-webpack-plugin -D
自动注入插件
使用： 配置文件plugins配置
报错： 4版本可能不兼容，使用3版本

cnpm i open-browser-webpack-plugin -D
自动打开浏览器插件，因为 webpack-dev-server 如果使用0.0.0.0 和open会有问题
使用： 配置文件plugins配置

cnpm i extract-text-webpack-plugin -D
样式抽离插件，已废弃，也可以用
使用： 配置

cnpm i cssgrace -D
代码美化，换行

cnpm i autoprefixer -D
自动补全，