webpack基础理解(谈谈对webpack理解)

java8

帖子摘要：webpack基础理解 webpack就是将不同格式的文件打包成浏览器能够执行识别的文件首先创建一些文件 npm init -y 初始化文件生成一个配置文件package.json  这里如......

- ?% U# p0 G) a2 X& O( C大家好，欢迎来到Java吧（www.java8.com），交流、学习Java技术、获取Java资源无任何套路，今天说一说：“webpack基础理解”& @5 M- S6 [3 R) n' O






                  webpack基础理解
webpack就是将不同格式的文件打包成浏览器能够执行识别的文件

首先创建一些文件

/ g* v& y1 s( w: H6 x& _
npm init -y 复制代码
初始化文件生成一个配置文件package.json
5 n; O! c+ {1 h4 {( g* W 8 h6 A$ n) L2 g( Z

这里如果直接打开静态文件引入main 他会提示你import引入这种模块化语法有问题浏览器并不能直接识别这时就需要我们通过webpack打包成浏览器识别的js语法
/ n& [% o0 C; d# |) J  i( k
npm i webpack webpack-cli -D 复制代码
//安装webpack包
2 P# J3 T: g2 \9 r4 U$ M; m
npx webpack ./src/main.js --mode=development 复制代码
//开发环境
, ^6 j1 x& M. u. J; j. v
npx webpack ./src/main.js --mode=production 复制代码
//生产环境
3 W: ?9 z0 B7 K3 y/ j: Y  l; y' O
3 w2 @( {( B# W- q
4 Z) k  g! y% E
8 y2 \0 w8 z' R* s- C7 p8 B. g) P/ Y0 I) y

5 F1 F9 x5 o0 Z0 q9 Z
; v# M( p  |7 O8 m- n
" `  `6 A% a5 T/ L* a/ R& \
webpack配置

3 a3 H9 |5 g5 _$ A 接下来就是对webpack文件的配置
' l% {: _  E7 S9 h 入口entry! }5 L/ ]. U8 J3 [- m: W, J
输出output) D7 _, u6 }1 y+ Q" Z1 \& l7 c. J
加载器loader
" [/ }' L* G8 m: T/ M, L, Z 插件plugins
  q% o) w2 m% L7 ^1 _6 a; T 模式mode 开发development生产production
* v  d+ u9 h4 a3 G+ p$ o* C. w: c
/ V& I4 b( z/ R6 l5 q; ~
在webpack根目录加上webpack.config.js 写法固定不变

const path = require('path')//nodejs核心模块专门用来处理路径问题
, z; J" @7 E+ s1 H
module.exports = {
" t; u+ I' J  ?0 U- H3 m
    //入口
) O1 Q2 p: I: K* A# @$ P- l
    entry: './src/main.js',//相对路径
    //出口
    output: {
        //__dirname nodejs变量代表当前文件夹目录当前文件侠士config.js 目录就是最外层的demo
        path: path.resolve(__dirname, 'dist'),//绝对路径
0 Q3 T6 R) @5 g
        //文件名
        filename: 'static/index.js',
! G1 c6 U9 n8 t, D$ V
        clean:true//每次打包清空之前
    },
    //加载器
    module: {
        //规则
" B0 G6 k3 [7 i1 J
        // loader的配置
1 t$ s2 r( H5 K( {0 w
        rules: [
  M+ Q1 J& R$ t9 ^
            
        ]
    },
    //插件
    plugins: [],
    //模式
    mode: "development"
& u' Y2 O1 y! t
}
( H8 I2 x( K) t: w0 }8 g, O
复制代码

2 K# V( x+ i7 k4 L; Y& {0 M( f6 E: I+ T loader配置官方文档
7 Y$ F. X6 l# V. T3 p 这里文档有个通病就是* c# l0 L6 R! f  z9 e4 ^
0 Z% C5 n% I0 j# V+ e% R: o

; x# N( U- E" \7 Z) A 这里只让我们下载css-loader 而配置文件却是' N) g2 M$ K/ Z( o& Z/ [) \4 V

{ test: /\.css$/i, use: ["style-loader", "css-loader"], }, 复制代码
6 z; G0 k  I/ l9 m2 L
这时候会报错9 R% _( y) o0 g, G) s  `& C2 d

! h# X8 b4 u) q& i& b% `" E" u1 z 说我们style-loader没有找到4 D6 w$ M) L2 c' c

$ Q  q# M3 n4 ^$ ^
正确的是同时也要下载style-loader

必坑
复制代码

use可以使用多个loader数组形式而loader只能写一个loader

下面主要讲解loader配置

 //加载器
+ [+ s' ?$ o* D  E1 L/ P4 G' g
    module: {
# G0 ^: i9 C' W, I+ w. b9 f2 ]
        //规则
* |- l' i- X5 U) C6 q2 Y
        // loader的配置
        rules: [
! k. M$ `( S2 k  {
            {
% H3 H. S, s, D2 i  Q
                test: /\.css$/i,
0 `2 r5 ^; v- l, q: S- D
                use: ["style-loader", "css-loader"],
            },
            //图片性能优化小于10kb进行base64转换优点减少请求数量缺点体积变大
' M, r3 @6 a' n8 \- n, C9 `
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,//图片配置 如果是视频或者字体资源直接在这里改就行了
8 t5 P! X: G% d$ N! M! P
                type: 'asset',//设置资源 type‘asset/resource’原封不动输出
                generator: {
) Y/ O' k/ h6 w- q# o
                      filename: "static/image/[hash:10][ext][query]",//打包文件名hash唯一值hash:10哈希值前10位ext后缀 query其他参数
6 E4 E, @7 K/ X8 ]# C( g: w& i
                },
, p2 T0 ^; }! l- Z! o. \8 P1 C% C
                parser: {
                    dataUrlCondition: {
                        // 小于10kb会转换base64
6 t) ?/ n  a, w% e6 O
                        maxSize: 10 * 1024 
& |( Y+ u( p: V6 d
                    }
                }
            }
        ]
. ^! g# H  d! P/ w) v) K) ]
    },
复制代码

深入配置文件ESLint
5 A2 @0 J0 W" }* G. i- N
由于以上配置仅对模块化语法进行编译对于箭头函数等等一系列还没有自己解析的规则因此我们需要进行配置来对jsx等等进行编译4 U+ h) ]8 \) S1 S) Z9 P3 {
配置文件写法有很多! M! m2 B. z a' w. @. x% E

$ I& d5 M1 O4 t5 r* Q z

.eslintrc.*

.eslintrc

.eslintrc.js

.eslintrc.json

区别在于配置格式写法不一样我们常用js来用
. j! z. b* U. ^5 e# J
还有一种写法就是直接在package.json中的eslintConfig中写这样就不需要创建文件在原有文件基础上写ESLint会自动查找并读取他们所以以上方式存在一个即可

//以.eslintrc.js配置文件为例
module.exports={
# G9 s: t3 t( Q# k. C0 S
        //解析选项
        perserOptions:{
                ecmaVersion:6,//ES语法版本
                sourceType:"module",//ES模块化
1 k3 x1 V6 F  {4 N! ^
                ecmaFeatures:{//Es其他特性
                        jsx:true//如果是React项目就需要开启jsx语法
                }
        },
        //具体检查规则
  }7 o4 d7 [" c' K* E& [, i# @
        rules:{},
, z3 n& e8 @$ k& r) n; p
        //继承其他规则
        extends:[]
}
复制代码

eslint官方文档

rules具体规则

"off"或0 -关闭规则

"warn"或1 -开启规则警告级别错误warn不会导致程序退出

"error"或2 -开启规则错误级别错误error触发时程序会退出
demo

rules:{
' t. s; o  |" l0 S: _
        semi:"error",//禁止使用分号
/ _5 z( _4 O3 R; c! p
        'array-callbac-return':"warn",//强制数组方法的回调函数有return语句否则警告
$ P3 m4 G: [. i, Z0 T) Y
        'default-case':[
                'warn',//要求swutch语句中有default分支否则警告
                {commentPattern:'^no default$'}//允许在最后注释 no default, 就不会有警告了
. e, O  N  I3 S) u& F
        ],
, z0 \+ r6 }' ~7 r) I
        eqeqeq:[
9 a" s' T) j: ^% s9 n' ^7 n
                'warn',//强制使用=== 和!==否则警告
+ a! F7 S2 u; `6 G4 D1 f, h
                'smart'//除了少数情况下不会警告
. U8 {6 {6 b( {( r/ L' w9 U
        ]        
}
* B6 e" [7 V1 u  p+ w
复制代码

extends 继承
开发自己写rules规则太费经了所以最好的方式就是继承现有的规则
常用的的规则

Eslint官方规则 eslint:recommended

vue Cli:plugin:vue/essential

react Cli:react-app

//demo
module.exports={
2 _7 A7 J7 Y4 v# H
        //继承eslint规则
9 d1 f: H' ~/ M" v" g2 P+ M7 Z! F
        extends:["eslint:recommended"],
        env:{
: I3 }5 Y2 y; J8 T8 ?
                node:true,//启用node中全局变量
! p! x+ s( `6 N: }
                browser:true,//启用浏览器中全局变量
+ C- d5 D3 T  \
        },
  l% O! t; Y& r/ E% a! T7 |
        parserOptions:{
                ecmaVersion:6,//es6中语法
                sourceType:"module",
9 I5 R/ j/ G1 E1 |6 e6 D0 ^, k
        }
        rules:{
& y0 K1 j* s! O
                //在这里写的规则会自动覆盖继承的规则
                "no-var":2,//不能使用var定义变量
        }
% L. Q8 I+ U$ F3 g: W* n8 h
}
复制代码

本文来源csdn，由Java吧转载发布，观点不代表Java吧的立场，转载请标明来源出处：https://www.java8.com

webpack基础理解(谈谈对webpack理解)

java8 LV9