Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)(下)

简介: Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)

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>
目录
相关文章
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
50 0
|
2月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
48 0
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
27 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
19 0
|
4月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
106 0
|
4月前
|
JavaScript 数据库
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
66 0
|
7月前
|
JavaScript
Webpack4 创建项目以及打包一个JS文件
Webpack4 创建项目以及打包一个JS文件
68 0