webpack初识

• 压缩、打包
• 只认识 JS
• 多种文件编译——loader
• 脚手架
• 生成生产版

下载

先安装node
cmd输入：npm i webpack-cli -g

配置文件

• webpack.config.js文件

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

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

  • output——输出，必须是个对象

    path：_dirname是绝对路径

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

  • 所有 当前路径 前面必须加 ./

const path=require('path');

module.exports={
  mode: 'production',  //development模式
  entry: './index.js',  //当前路径前面必须加./
  output: {
    path: resolve(_dirname,'build'), //_dirname绝对路径
    filename: 'bundle.js'
  },
  module: {
    rules:[
        {test: /\.css$/, use: ['style-loader','css-loader']}
    ]
  }
};

JS文件引用

导出JS文件

export

• export let/const a=xxx;
• export {xxx,xxx,xxx};
• export function xxx(){ };
• export class xxx{ };
• export default xx; 导出默认值

引入JS文件

import

• import * as mod from "./xxx";
• import {a, b, c, ...} from "./xxx;
• import xxx from './mod'; 引入默认成员
• import "./1.jpg";
• import "./1.css";
  let promise=import("./mod2"); 异步引入，一般不太重要，比如广告

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

从另一个模块导出

• 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前缀，自动兼容浏览器

  • 下载

    • 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'    //保留原始代码，查错
  };
  

自动更新

dev-server

• 下载

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

• 直接启动不行，必须放在scripts

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

• npm run start

• 直接访问

  • 注意路径

代码质量

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"]
    }
  }
  

测试

jest

单元测试

• 下载

  • 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