webpack初識(shí)

• 壓縮、打包
• 只認(rèn)識(shí) JS
• 多種文件編譯——loader
• 腳手架
• 生成生產(chǎn)版

下載

先安裝node
cmd輸入：npm i webpack-cli -g

配置文件

• webpack.config.js文件

  • mode——模式
    mode: 'none'||'production'||'development', //打包

  • entry——入口地址
    entry: '入口'||{rukou1: 'xx', rukou2: 'xxx'}, //單入口||多入口

  • output——輸出，必須是個(gè)對(duì)象

    path：_dirname是絕對(duì)路徑

    filename：文件名
    filename: '[name].min.js' //多文件打包

  • 所有 當(dāng)前路徑 前面必須加 ./

const path=require('path');

module.exports={
  mode: 'production',  //development模式
  entry: './index.js',  //當(dāng)前路徑前面必須加./
  output: {
    path: resolve(_dirname,'build'), //_dirname絕對(duì)路徑
    filename: 'bundle.js'
  },
  module: {
    rules:[
        {test: /\.css$/, use: ['style-loader','css-loader']}
    ]
  }
};

JS文件引用

導(dǎo)出JS文件

export

• export let/const a=xxx;
• export {xxx,xxx,xxx};
• export function xxx(){ };
• export class xxx{ };
• export default xx; 導(dǎo)出默認(rèn)值

引入JS文件

import

• import * as mod from "./xxx";
• import {a, b, c, ...} from "./xxx;
• import xxx from './mod'; 引入默認(rèn)成員
• import "./1.jpg";
• import "./1.css";
  let promise=import("./mod2"); 異步引入，一般不太重要，比如廣告

    import("./mod2").then(mod2=>{
      alert('mod2的qq:'+mod2.qq);
    }, err=>{
      alert('mod2加載失敗');
    });

從另一個(gè)模塊導(dǎo)出

• export * from './m2';
• export {x,x,x,x} from './m2';
• export {default} from './m2';

loader

幫助webpack處理js以外的文件

處理css文件

• 下載

  • cnpm i style-loader -D
  • cnpm i css-loader -D

  module: {
      rules:[
          {test: /\.css$/, use: ['style-loader','css-loader']}
      ]
  }
  

• 添加css前綴，自動(dòng)兼容瀏覽器

  • 下載

    • cnpm i postcss-loader -D
    • cnpm i autoprefixer -D ——插件

  • postcss-loader & autoprefixer

    module.exports={
        module: {
            rules: [
              {test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']}
            ]
        }
    }
    

    module.exports={
        plugins: [
            require('autoprefixer')
        ]
    }
    

處理less文件

• 下載

  • cnpm i less-loader
  • cnpm i less

• dknf

  {test: /\.less$/i, use: ['style-loader','css-loader','less-loader']}
  

讀取文件

• 下載

  • cnpm i file-loader -D 讀取并且輸出文件
  • cnpm i url-loader -D 讀取并且輸出base64——處理小圖片

• file-loader

  {test: /\.(jpg|png|gif)$/i, use: {
      loader: 'file-loader',
          options: {
              outputPath: 'images/'
          }
  }}
  

• url-loader 可以取代file-loader

  {test: /\.(jpg|png|gif)$/i, use: {
      loader: 'url-loader',
          options: {
              outputPath: 'images/',
                  limit: 1024           //0  作用和file-loader一樣
          }
  }}
  

babel編譯

• 下載

  • cnpm i babel-loader @babel/core @babel/preset-env -D

• babel

  module.exports={
      module: {
          rules: [
              {
                  test: /\.jsx?/i,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['@babel/preset-env']
                      }
                  }
              }
          ]
      },
      devtool: 'source-map'    //保留原始代碼，查錯(cuò)
  };
  

自動(dòng)更新

dev-server

• 下載

  • cnpm i webpack webpack-cli webpack-dev-server -D

• 直接啟動(dòng)不行，必須放在scripts

  "scripts": {
    ...,
    "start": "webpack-dev-server"
  }
  

• npm run start

• 直接訪問

  • 注意路徑

代碼質(zhì)量

eslint

• 下載

  • cnpm i eslint eslint-loader -D

• 配置

  module.exports={
    module: {
      rules: [
        {
          test: /\.js$/i,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
  
          }
        }
      ]
    },
    devtool: 'source-map'
  };
  

  //.eslintrc 文件
  {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "rules": {
      "indent": ["error", 2],
      "linebreak-style": ["error", "windows"],
      "quotes": ["error", "double"],
      "semi": ["error", "always"]
    }
  }
  

測(cè)試

jest

單元測(cè)試

• 下載

  • cnpm i jest jest-webpack -D

• 配置

  "scripts": {
    ...,
    "test": "jest-webpack"
  },
  

  const mod=require('../src/js/3');
  
  test('fab 1~5', ()=>{
    expect(mod.fab(1)).toBe(1);
    expect(mod.fab(2)).toBe(1);
    expect(mod.fab(3)).toBe(2);
    expect(mod.fab(4)).toBe(3);
    expect(mod.fab(5)).toBe(5);
  });
  
  test('fab 7', ()=>{
    expect(mod.fab(7)).toBe(13);
  });
  

• npm run test