【webpack】技巧使用

webpack和TypeScript

      • 安装webpack相关内容
      • 安装TS相关内容
      • 配置初始化数据
      • 初始化运行展示和目录展示
          • 报错解决(缺失文件配置)
      • 安装前端必备神奇lodash测试一下
      • entry配置
      • index.html模板配置
          • 修改打包出来的index.html的title
          • inject注入
          • chunks 属性
          • 多页面配置
      • Tree Shaking-(摇晃无用代码)
          • sideEffects属性
      • 渐进式网络应用程序PWA
          • PWA
      • Shimming预置全局变量
      • 细粒度Shimming-转换this的指向
      • 全局Exports

安装webpack相关内容

  • npm init -y,自动建立package.json
  • npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D

安装TS相关内容

  • npm i typescript ts-loader -D

配置初始化数据

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/app.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [new HtmlWebpackPlugin()],
};

初始化运行展示和目录展示

  • npx webpack
    【webpack】技巧使用_第1张图片
报错解决(缺失文件配置)
  • npx tsc --init
  • 自动创建tsconfig.json
  • 配置一下:
  • 【webpack】技巧使用_第2张图片
    【webpack】技巧使用_第3张图片
  • 到此,执行npx webpack 即可打包成功
    【webpack】技巧使用_第4张图片

安装前端必备神奇lodash测试一下

  • npm i lodash -D
  • 当你使用相关包,包类型报错的时候
  • 原因:缺少ts 相关类型文件
  • ts相关类型文件搜索查看引用命令 【webpack】技巧使用_第5张图片
  • npm install --save-dev @types/lodash
    【webpack】技巧使用_第6张图片

entry配置

  • 当入口文件不止一个的时候,想多个文件打在一个里面的时候
    【webpack】技巧使用_第7张图片
  • 当想单独打成文件的时候
  • 缺点:这个做法相当于lodash自己打一遍,但ap.ts里有使用会再打一遍,最终main.js体积也会变大
    【webpack】技巧使用_第8张图片
  • 抽离一下lodash
  • 目的:使main.js体积变小
    【webpack】技巧使用_第9张图片

index.html模板配置

  • 没有配置的时候打包出来的index.html
    【webpack】技巧使用_第10张图片
  • 配置一下
  • 新建index.html
    【webpack】技巧使用_第11张图片
  • 导入模块
    【webpack】技巧使用_第12张图片
修改打包出来的index.html的title
  • 步骤一,将index.html中改为
  • webpack内置的属性获取标题
    【webpack】技巧使用_第13张图片
<title>
    <%=htmlWebpackPlugin.options.title %>
</title>
  • 步骤2;
    【webpack】技巧使用_第14张图片
  • 成果展示
    【webpack】技巧使用_第15张图片
inject注入
chunks 属性
  • 没配置前,默认全部

  • 有几个入口,引用几个
    【webpack】技巧使用_第16张图片

  • 配置图
    【webpack】技巧使用_第17张图片

  • 配置后,只留下配置的
    【webpack】技巧使用_第18张图片

多页面配置
  • 注意点:多页面配置filename属性要有,且不同
  • filename如果配置成:“/sh_pc/index.html”,打出的包会在文件夹sh_pc下
plugins: [
    new HtmlWebpackPlugin({
      title: '乞力马扎罗',
      template: './index.html',
      inject: 'body', // 可以表示这个注入到哪个层
      filename: 'index.html',
      chunks: ['main'], //可以配置打包出来的index.html只能引入哪个
      publicPath: 'http://lochost:8080/', // 可以配置打包出来的index.html的路径
    }),
    new HtmlWebpackPlugin({
      title: '罗马迪克',
      template: './index2.html',
      inject: 'body', // 可以表示这个注入到哪个层
      filename: 'index2.html',
      chunks: ['lodash'], //可以配置打包出来的index.html只能引入哪个
      publicPath: 'http://lochost:8081/', // 可以配置打包出来的index.html的路径
    }),
  ],
  • 优化后:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: {
    main: {
      import: ['./src/app.ts', './src/app2.ts'],
      dependOn: 'lodash',
    },
    lodash: {
      import: 'lodash',
    },
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: '乞力马扎罗',
      template: './index.html',
      inject: 'body', // 可以表示这个注入到哪个层
      filename: 'sh_pc/index.html',
      chunks: ['main'], //可以配置打包出来的index.html只能引入哪个
      publicPath: 'http://lochost:8080/', // 可以配置打包出来的index.html的路径
    }),
    new HtmlWebpackPlugin({
      title: '罗马迪克',
      template: './index2.html',
      inject: 'body', // 可以表示这个注入到哪个层
      filename: 'sh_oc/index2.html',
      chunks: ['lodash'], //可以配置打包出来的index.html只能引入哪个
      publicPath: 'http://lochost:8081/', // 可以配置打包出来的index.html的路径
    }),
  ],
  output: {
    clean: true,
  },
};

Tree Shaking-(摇晃无用代码)

  • Tree-shaking的本质是消除无用的js代码

  • 用到啥才会打包啥
    【webpack】技巧使用_第19张图片

  • 看一下区别:
    【webpack】技巧使用_第20张图片
    【webpack】技巧使用_第21张图片

  • 虽然引入了lodash,但未使用,所以打出来的包里面的lodash被摇晃掉了
    【webpack】技巧使用_第22张图片

【webpack】技巧使用_第23张图片

sideEffects属性
  • 在package.json中进行配置,即匹配到的任何css文件都不进行Tree Shaking

【webpack】技巧使用_第24张图片

渐进式网络应用程序PWA

  • 非离线状态运行
  • 借助第三方包
  • npm i http-server -D
  • 配置一下运行脚本
  • npm start
    【webpack】技巧使用_第25张图片
    -当他成功启动后,页面展示, 但当你把服务器挂掉,页面就不展示
    【webpack】技巧使用_第26张图片
  • 一般来说,启动服务是不会更新包里面的内容,如果你想更新内容
    【webpack】技巧使用_第27张图片
PWA
  • 离线状态运行
  • 先安装
  • npm i workbox-webpack-plugin -D
  • 再配置【webpack】技巧使用_第28张图片
  • 再运行【webpack】技巧使用_第29张图片
  • 页面上监听一下游览器是否支持离线运行
  • 想要清除这个离线状态
  • 访问chrome://serviceworker-internals/上点一下Unrefister即可
console.log('乞力马扎罗');
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then((registration) => {
        console.log('service-worker registed');
      })
      .catch((error) => {
        console.log('service-worker registed error');
      });
  });
}
  • npm start
    【webpack】技巧使用_第30张图片

Shimming预置全局变量

  • 旧代码
    【webpack】技巧使用_第31张图片
  • 新项目
  • 本来会报错,但通过预置全局变量配置了就不会
  • 配置完,lodash就是全局的了【webpack】技巧使用_第32张图片
  • 这样配置即可【webpack】技巧使用_第33张图片

细粒度Shimming-转换this的指向

  • 有些模块的this指向window对象
  • 但实际我们的CommonJS项目中this指向指向的实际位置不是
  • 解决方法:
  • 通过使用imports-loader覆盖this指向
  • 目前问题:
    在这里插入图片描述

【webpack】技巧使用_第34张图片

  • 解决步骤一:
  • npm i imports-loader
  • 步骤二:配置
    【webpack】技巧使用_第35张图片

全局Exports

  • 第三方模块,你不清楚他是如何导出的
  • 故你想使用,但不想导入,想直接使用里面的方法
  • 步骤一
  • npm i exports-loader -D
  • 步骤二
  • 新建要导入的文件gloabls.js
const file = '公共的';

const helpers = {
  parse() {
    console.log('方法');
  },
};
  • 步骤三
  • webpack.config.js里面配置
    【webpack】技巧使用_第36张图片
  • 步骤四 页面中使用
    【webpack】技巧使用_第37张图片
    【webpack】技巧使用_第38张图片

你可能感兴趣的:(【前端工程化】,webpack,前端,node.js)