Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）（上）：https://developer.aliyun.com/article/1420344
Webpack中devtool增强调试过程
我们可以通过 devtool 来设置增强调试过程
通过设置 devtool 生成source map
Source Map
1、source map 是一个信息文件，里面存储着代码压缩前后的位置信息。
2、即可以在Debug时直接显示原始代码的位置信息，而不是压缩后的，极大方便后期调试
开发环境下默认生成的Source Map ，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题
解决方案：在webpack.dev.config.js中添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致
const commonConfig = require("./webpack.config"); const { merge } = require("webpack-merge"); const devConfig = { mode: 'development', //此选项生成的 Source Map 能保证运行时的报错行数与源代码的行数保持一致 devtool:'source-map' } module.exports = merge(commonConfig,devConfig)
Source Map 的最佳实践
开发模式下
建议直接把devtool 的值设置为 source-map ,可以直接定位到具体的错误行
生产环境下
建议关闭Source Map 或者 将devtool 设置为 hidden-nosources-source-map ,防止源码泄漏，提高网站的安全性
.browserslistrc文件说明
browserslistrc文件是为了表示当前项目的浏览器兼容情况
使用方式有三种：
1、在package.json中设置
2、设置成独立的配置文件
3、某些插件需要重新设置browserslist
我们参考Vue项目的环境配置，选择第二种方式，设置成独立的配置文件
在项目的根目录下创建 .browserslistrc 文件
> 1% // 兼容市场上占有率超过1%的浏览器(世界级) last 2 versions // 兼容浏览器最近的两个版本 not dead // 不支持24个月内没有官方支持或者更新的浏览器 not ie 11 // 不支持ie 11
postcss-loader处理css兼容
postcss是JavaScript转换样式的工具，这个工具能处理css兼容问题。就是这个工具能给我们写的css代码添加一些兼容的前缀
安装
npm install --save-dev autoprefixer@10.4.7 npm install --save-dev postcss@8.4.14 npm isntall --save-dev postcss-loader@7.0.0 npm install --save-dev postcss-preset-env@7.7.1
在项目根目录下创建 postcss.config.js 文件
// postcss.config.js module.exports = { plugins: { "autoprefixer":{ "overrideBrowserslist":[ // 兼容IE7以上浏览器 "ie >= 8", // 兼容火狐版本号大于3.5浏览器 "Firefox >= 3.5", // 兼容谷歌版本号大于35浏览器, "chrome >= 35" ] } } }
修改 webpack.config.js 文件
rules: [ { test: /\.css$/, use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader"] }, { test: /\.less$/, use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","less-loader"] }, { test: /\.(scss|sass)$/, use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","sass-loader"] } ]
修改CSS文件
.root{ width: 400px; height: 200px; background-color: #f1f1f1; display: flex; }
Webpack构建React环境
目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目
接下来，我们用 webpack 构架一个React项目的环境
安装
npm install -D @babel/preset-react@7.17.12 npm install -S react@18.2.0 npm install -S react-dom@18.2.0
增加配置文件
React使用的语法为 jsx 语法，所以我们需要配置 jsx 的解析模块
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }
同时我们需要修改 babel.config.js 文件
module.exports = { presets: [ '@babel/preset-env', "@babel/preset-react" ] }
编写React代码
import React from 'react' import ReactDom from 'react-dom' class App extends React.Component { render(){ return ( <div style={{color:"#333"}}> Hello </div> ) } } ReactDom.render(<App/>,document.getElementById("root"))
Webpack构建Vue环境
目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目
接下来，我们用 webpack 构架一个Vue项目的环境
安装
Vue专属文件时 .vue ,我们需要一些包帮助去解析他
npm install --save vue@3.2.37 npm install --save-dev vue-loader@17.0.0 npm install --save-dev vue-style-loader@4.1.3 npm install --save-dev vue-template-loader@1.1.0 npm install --save-dev vue-template-compiler@2.6.14
增加配置文件
在 webpack.config.js 文件中
const { VueLoaderPlugin } = require('vue-loader') const baseConf = { module:{ { test: /\.vue$/, use: ['vue-loader'] } }, plugins:[ new VueLoaderPlugin() ] }
编写Vue代码
// index.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#root')
// App.vue <template> <p>Vue文件环境测试</p> </template> <script> export default { } </script> <style> p{ color: red; } </style>
