webpack

webpack是将一个或多个文件作为入口，将整个项目打包成一个或多个文件输出

webpack开发模式：只能编译js中的es6的语法

webpack生成模式：可以打包es6和压缩js

webpack的使用

1.资源目录

webpack_code #项目根目录
    src  #项目源码文件
        其他文件
    main.js #项目主文件

2.创建文件

3.下载依赖

1.初始化

npm init -y

2.下载

npm i webpack webpack-cli -D

4.启动webpack

1.开发模式

npx webpack ./src/main.js --model=development

2.生产模式

npx webpack ./src/main.js --model=production

核心概念--基本配置webpack.config.js

1.entry（入口）

打包文件的入口

2.output（出口）

打包文件的出口

3.loader（加载器）

文件加载器

4.plugins（插件）

下载的插件

5.mode（模式）

所处模式

const path = require('path');
module.exports = {
  entry:'./src/main.js',
  output:{
    // 打包路径  绝对路径
    path:path.resolve(__dirname, 'dist'),
    // 打包文件名
    filename:'main.js'
  },
  // loader 加载器
  module:{
    rules:[
      // loader 的配置
      {// 处理css文件
        test: /\.css$/i,   
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
  // 插件
  plugins:[

  ],
  resolve: {
    extensions: ['.js', '*', '.css']  //问题就出在这里
  },
  // mode模式
  mode:"development"
}

配置完的运行指令：npx webpack

处理样式资源

Loaders | webpack 中文文档 | webpack 中文文档 | webpack 中文网

清空打包结果，再次打包

output:{
    // 打包路径  绝对路径
    path:path.resolve(__dirname, 'dist'),
    // 打包文件名
    filename:'main.js'，
    clean:true  // 清除原包
  },

icon图标

iconfont-阿里巴巴矢量图标库

js处理的升级

babel，js兼容性

eslint，代码格式

eslint

.eslint.js  eslint.json  eslintrc 配置文件

或是        package.json中eslintConfig:

继承已有的规则：eslint:recommended    plugin:vue/essential    react-app

module.exports ={
  // 解析选项
  parserOptions:{
    ecmaVersion:6, // js语法版本
    sourceType:"module"  // es module
  },
  // eslint规则
  rules:{
    "no-var" : "error" // 禁止使用var
  },
  env:{
    node:true,  // 启用node中的全局变量
    browser:true  // 启用浏览器中的全局变量
  },
  // 继承规则
  extends:["eslint:recommended"],
}

.eslintignore   内容  dist

babel

babel.config.js  babel.config.json  babelrc.json babelrc.js  package.json   babel:

@babel/preset-env   允许使用最新的js

@babel/preset-react  编译jsx

@babel/preset-typescript   编译ts

处理html资源--webpack插件

搭建开发服务器

dev-server

// 开发服务器的配置  不会输出的
  devServer:{
    host: "localhost",  // 启动服务器的域名
    port: 3000,
    open: true, // 是否自动打开浏览器
  },

// webpack

npx webpack server

生产模式

"scripts": {
    "start": "npm run dev",
    "dev": "webpack serve --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },

杜绝闪屏问题---单独打包css

MiniCssExtractPlugin

 Css兼容问题

 postcss-loader 

压缩css

CssMinimizerWebpackPlugin

webpack高级

1.提升开发体验

SourceMap源代码映射包，用于调试

插件SourceMapDevToolPlugin

2.提升打包构建速度

HotModuleReplacementPlugin

oneOf: [
          {
            resourceQuery: /inline/, // foo.css?inline
            use: 'url-loader',
          },
          {
            resourceQuery: /external/, // foo.css?external
            use: 'file-loader',
          },

 cache ： 减少js文件打包速度

Terser ：多线程打包thread-loader    TerserWebpackPlugin

exclude include

3.减少代码体积

tree shaking：@babel/plugin-transform-runtime

@babel/plugin-transform-runtime:禁止了babel对于每一个文件的runtime注入，而是引入@babel/plugin-transform-runtime并使得所有辅助代码从这里引用

图片压缩

ImageMinimizerWebpackPlugin    

3.优化代码运行性能 

code split代码分割

entry:{
    app: "./"
    main:"./"
}
output:{
    path: path.resolve(__dirname,"dist")
   filename:"[name].js"
}

// 多入口多出口分割文件


// 不重复打包公共文件optimization

// 动态导入

im

 

 空闲加载

preload  当前页面加载

prefetch 下一个页面预加载

pwa

npm install workbox-webpack-plugin --save-dev

vue-cli

react-cli