webpack使用详解(二)

webpack历史

• 前端工具的极速发展
• grunt打包工具，速度太慢，快死了
• gulp打包工具，速度可以，但没webpack繁荣
• require.js 快死了
• sea.js 死了
• Browserify 已经挂了

与webpack竞争的工具

• Rollup

1. 比webpack的打包体积小
2. 但生态不够丰富
3. 适合库的开发

-Parcel

1. 比webpack配置简单
2. 适合demo学习

webpack做了什么？

webpack loader和 plugins

翻译：loader = 加载器 plugin = 插件

解释：loader = load 文件 比如css-loader，用来加载css文件 plugin = 加强功能，比如html-webpack-plugin，可用来生成html

webpack 引入 scss

• 原理：sass-loader把scss内容读到js里，style.css把他加上style标签放在head中
• 把新建x.scss用x.js引入

import "./x.scss";

• 引入sass-loader

yarn add sass-loader --dev

• 加webpack.config.js内容

module: {
    rules: [
      {
      {
        test: /\.scss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            //注意，如果不配置这个options，运行yarn build的时候会报错，因为webpack会默认使用node-sass
            //node-sass是已经过时
            options: {
              implementation: require("dart-sass")
            }
          }
        ]
      }
    ]
}

webpack 引入less

• 原理：less-loader把less内容读到js里，style.css把他加上style标签放在head中
• 把新建x.less用x.js引入

import "./x.less";

• 引入less和less-loader

yarn add less --dev
yarn add less-loader --dev

• 加webpack.config.js内容

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

webpack 引入stylus

• 原理：stylus-loader把styl内容读到js里，style.css把他加上style标签放在head中
• 把新建x.styl用x.js引入

import "./x.styl";

• 引入stylus和stylus-loader

yarn add stylus --dev
yarn add stylus-loader --dev

• 加webpack.config.js内容

module: {
    rules: [
     	 {
	      	test: /\.styl$/,
        	loader: ["style-loader", "css-loader", "stylus-loader"]
      	}
    ]
}

注意：scss、less、styl支持css语法

webpack 引入图片

• 原理：file-loader把图片读到js里，然后引入到html中
• 把新建img.jpg用x.js引入

import jpg from "./assets/img.jpg";

• 引入file-loader

yarn add file-loader --dev

• 加webpack.config.js内容

module: {
    rules: [
     	 {
	        test: /\.(png|svg|jpg|gif)$/,
        	use: ["file-loader"]
      	}
    ]
}

webpack 使用懒加载

何为懒加载

1. 事情不得不做的时候，才进行处理。
2. 平常处于装死状态。

代码示例

//lazy.js
export default function lazy(){
    console.log("lazy loader module");
}
//main.js
const div = document.getElementById("app");
const btn = document.createElement("button");
btn.innerText = '懒加载';
btn.onclick = ()=>{
	//import导入模块属于一个promise对象，因此可以使用promise的then方法
    const promise = import("./lazy.js");
    promise.then((module)=>{
        const fn = module.default;
        fn();
    },()=>{
        console.log("模块加载失败");
    });
}
div.appendChild(btn);

webpack 部署到gitHub pages

1. 先yarn build 建立dist目录，然后提交代码
2. 去settings里面设置pages即可。
3. 可以建立分支去处理
4. 主要是写一个sh脚本

yarn build &&
git checkout gh-pages &&
mv dist/* ./ && 
rm -rf dist;
git add . && 
git commit -m 'update' &&
git push && 
git checkout master
// 运行命令
sh ./*.sh